Membuat Button Emboss dengan CSS 3

Sebelum kelahiran Css 3, biasanya para web developer atau web designer akan membuat button emboss dengan tehnik grafis (background images)yang dibuat di photoshop ataupun program pengolah gambar lainnya.

Sekarang bagi yang belum mampu mengolah gambar/grafis dengan baik, jangan khawatir karena CSS 3 akan mengerjakannya dengan Sempurna.

Demo

Dengan menggunakan kode CSS seperti dibawah ini akan menghasilkan sebuahbutton emboss yang cantik tanpa harus menggunakan background images:

.button{
margin: 0.1em;
text-align:center;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
width:140px;
padding:0.3em;
}

#b1 {
background:#ddd;
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;}

#b1 a {
text-decoration:none;
color:#888;}

#b1 a:hover {
color:#555;}

Catatan:Cara ini belum didukung oleh Browser IE
Example

Artikel terkait :