<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Button http://windyadityaningrum.blogspot.com</title>
<style type="text/css">
input[type=button], button {
/* tempat menambahkan style */
padding: 5px;
width: 90px;
outline-width: 0;
border: 1px solid #000;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear,
left top, left bottom,
color-stop(0.0, rgba(255, 255, 255, 0.8)),
color-stop(0.01, rgba(255, 255, 255, 0.6)),
color-stop(0.5, rgba(255, 255, 255, 0.3)),
color-stop(0.5, rgba(255, 255, 255, 0.2)),
color-stop(1.0, rgba(255, 255, 255, 0.0)));
background-image: -moz-linear-gradient(top,
rgba(255, 255, 255, 1.0) 0%,
rgba(255, 255, 255, 0.6) 1px,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.0) 100%);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9),
inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
inset 0px 1px 0px rgba(255, 255, 255, 0.5);
background-color: #474;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
-webkit-transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
-webkit-box-shadow 0.2s ease-in-out;
-moz-transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
-moz-box-shadow 0.2s ease-in-out;
-o-transition: background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
box-shadow 0.2s ease-in-out;
}
input[type=button]:hover, input[type=button]:focus,
button:hover, button:focus {
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
background-color: #696;
}
input[type=button]:active, button:active {
background-color: #242;
color: #ccc;
-webkit-transition-duration: 0.0s;
}
body { padding: 20px; }
</style>
</head>
<body>
<input type="button" value="Login" />
<input type="button" value="Login" />
<input type="button" value="Login" />
<input type="button" value="Login" />
<input type="button" value="Login" />
<input type="button" value="Login" />
<input type="button" value="Login" />
<input type="button" value="Login" />
</body>
</html>
