Button di atas dengan menggunakan css berikut ini : hasil bisa jadi berbeda antara browser mozilla, opera, atau yang lainnya.
.button {
cursor:pointer;
background:#328EC5;
background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
background:-ms-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
background:-o-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
background:linear-gradient(top, #74BCE6 0%, #328EC5 57%);
padding:0.75em 1.5em;
font:normal 1em Calibri,Arial,Sans-Serif;
text-transform:uppercase;
color:#fff;
text-decoration:none;
text-shadow:0px -1px 0px rgba(0,0,0,0.3);
-webkit-box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.5),
inset 0px -1px 0px rgba(0,0,0,0.4),
0px 1px 2px rgba(0,0,0,0.7);
-moz-box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.5),
inset 0px -1px 0px rgba(0,0,0,0.4),
0px 1px 2px rgba(0,0,0,0.7);
box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.5),
inset 0px -1px 0px rgba(0,0,0,0.4),
0px 1px 2px rgba(0,0,0,0.7);
-webkit-border-radius:0.7em;
-moz-border-radius:0.7em;
border-radius:0.7em;
border:none;
}
.button:hover {
background:#399BD6;
background:-webkit-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
background:-moz-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
background:-ms-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
background:-o-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
background:linear-gradient(top, #88CEF7 0%, #399BD6 57%);
-webkit-box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.5),
inset 0px -1px 0px rgba(0,0,0,0.5),
0px 2px 4px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.5),
inset 0px -1px 0px rgba(0,0,0,0.5),
0px 2px 4px rgba(0,0,0,0.4);
box-shadow:
inset 0px 1px 0px rgba(255,255,255,0.5),
inset 0px -1px 0px rgba(0,0,0,0.5),
0px 2px 4px rgba(0,0,0,0.4);
}
.button:active {
background:-webkit-linear-gradient(bottom, #88CEF7, #399BD6);
background:-moz-linear-gradient(bottom, #88CEF7, #399BD6);
background:-ms-linear-gradient(bottom, #88CEF7, #399BD6);
background:-o-linear-gradient(bottom, #88CEF7, #399BD6);
background:linear-gradient(bottom, #88CEF7, #399BD6);
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
HTML / Kode pemanggil tombol
<a class="button" href="#">Get Started</a>
