Membuat Button Emboss dengan CSS 3

css 3 button embossSebelum 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 sebuah button 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

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *