HTML
<a href="#" class="tombol">Keterangan</a>
Css Button 1
.tombol1 {
color:#787878;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #dcdcdc;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
}
.tombol1:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.tombol1:active {
position:relative;
top:1px;
}
Css Button 2
.tombol2 {
color:#575757;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow: 0px 1px 0px #B0B0B0;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #8c8a8c;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #c9c9c9;
-moz-box-shadow:inset 0px 1px 0px 0px #c9c9c9;
box-shadow:inset 0px 1px 0px 0px #c9c9c9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9c9c9c), color-stop(1, #787678) );
background:-moz-linear-gradient( center top, #9c9c9c 5%, #787678 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9c9c9c', endColorstr='#787678');
background-color:#9c9c9c;
}
.tombol2:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #787678), color-stop(1, #9c9c9c) );
background:-moz-linear-gradient( center top, #787678 5%, #9c9c9c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#787678', endColorstr='#9c9c9c');
background-color:#787678;
}
.tombol2:active {
position:relative;
top:1px;
}
Css Button 3
.tombol3 {
color:#a8a8a8;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #000000;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #8a8a8a;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #aba9ab;
-moz-box-shadow:inset 0px 1px 0px 0px #aba9ab;
box-shadow:inset 0px 1px 0px 0px #aba9ab;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7a7a7a), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #7a7a7a 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a7a7a', endColorstr='#000000');
background-color:#7a7a7a;
}
.tombol3:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #7a7a7a) );
background:-moz-linear-gradient( center top, #000000 5%, #7a7a7a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#7a7a7a');
background-color:#000000;
}
.tombol3:active {
position:relative;
top:1px;
}
Css Button 4
.tombol4 {
color:#b58a0b;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #f2cc59;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #fffcbd;
-moz-box-shadow:inset 0px 1px 0px 0px #fffcbd;
box-shadow:inset 0px 1px 0px 0px #fffcbd;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #f2cc59) );
background:-moz-linear-gradient( center top, #ffec64 5%, #f2cc59 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#f2cc59');
background-color:#ffec64;
}
.tombol4:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2cc59), color-stop(1, #ffec64) );
background:-moz-linear-gradient( center top, #f2cc59 5%, #ffec64 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2cc59', endColorstr='#ffec64');
background-color:#f2cc59;
}
.tombol4:active {
position:relative;
top:1px;
}
Css Button 5
.tombol5 {
color:#b04600;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #dbb172;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #eeb44f;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #fceaca;
-moz-box-shadow:inset 0px 1px 0px 0px #fceaca;
box-shadow:inset 0px 1px 0px 0px #fceaca;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1ad0e), color-stop(1, #db7c15) );
background:-moz-linear-gradient( center top, #f1ad0e 5%, #db7c15 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1ad0e', endColorstr='#db7c15');
background-color:#f1ad0e;
}
.tombol5:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db7c15), color-stop(1, #f1ad0e) );
background:-moz-linear-gradient( center top, #db7c15 5%, #f1ad0e 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#db7c15', endColorstr='#f1ad0e');
background-color:#db7c15;
}
.tombol5:active {
position:relative;
top:1px;
}
Css Button 6
.tombol6 {
color:#ffc2c2;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #9e0b00;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #d02718;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #faa199;
-moz-box-shadow:inset 0px 1px 0px 0px #faa199;
box-shadow:inset 0px 1px 0px 0px #faa199;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f) );
background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
background-color:#f24537;
}
.tombol6:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537) );
background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
background-color:#c62d1f;
}
.tombol6:active {
position:relative;
top:1px;
}
Css Button 7
.tombol7 {
color:#0f7d1c;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #7fc70c;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #74b807;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
box-shadow:inset 0px 1px 0px 0px #a4e271;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
background-color:#89c403;
}
.tombol7:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
background-color:#77a809;
}
.tombol7:active {
position:relative;
top:1px;
}
Css Button 8
.tombol8 {
color:#11488f;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #7cacde;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #2893d6;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #73b4dd), color-stop(1, #468ccf) );
background:-moz-linear-gradient( center top, #73b4dd 5%, #468ccf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#73b4dd', endColorstr='#468ccf');
background-color:#73b4dd;
}
.tombol8:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #73b4dd) );
background:-moz-linear-gradient( center top, #468ccf 5%, #73b4dd 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#73b4dd');
background-color:#468ccf;
}
.tombol8:active {
position:relative;
top:1px;
}
Css Button 9
.tombol9 {
color:#c9c9c9;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #660c78;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #a511c0;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #e184f3;
-moz-box-shadow:inset 0px 1px 0px 0px #e184f3;
box-shadow:inset 0px 1px 0px 0px #e184f3;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a780b3), color-stop(1, #87469c) );
background:-moz-linear-gradient( center top, #a780b3 5%, #87469c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a780b3', endColorstr='#87469c');
background-color:#a780b3;
}
.tombol9:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #87469c), color-stop(1, #a780b3) );
background:-moz-linear-gradient( center top, #87469c 5%, #a780b3 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#87469c', endColorstr='#a780b3');
background-color:#87469c;
}
.tombol9:active {
position:relative;
top:1px;
}
