Membuat Tombol Cantik dengan CSS

Design Web tidak segampang yang dibayangkan. Karena ketika kita melakukan design web, hasilnya bisa berubah-ubah ketika di preview di browser yang berbeda. Antara Firefox, Opera, Google Chrome ataupun Internet Explorer, memiliki respon yang beda terhadap design kita. Akhirnya hasil design hanya bagus dilihat dengan beberapa web browser tertentu saja.

Kali ini kita akan mencoba membuat tombol cantik pada halaman web dan kompatibel dengan semua web browser. Saya sudah mencobanya dengan 4 browser yang biasa saya gunakan. Contoh hasilnya adalah sbb :

Untuk melakukan praktek ini, kita memerlukan 3 buah gambar dibawah ini :

Simpan gambar tersebut di folder yang anda tentukan sendiri.

Langkah 1

Copy dan Paste code HTML dibawah ini pada halaman web.

    

        
            
            Simpan
        

        
            
            Ubah Password
        

        
            
            Batal
        
    

Langkah 2

Buat sebuah file style.css atau nama lainnya, kemudian copykan code dibawah ini kedalam file tersebut dan simpan ditempat yang anda tentukan sendiri.

/* CSS Document */		

/* BUTTONS */

.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:12px;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

/* REGULAR */

button.regular, .buttons a.regular{
    color:#336699;
}
.buttons a.regular:hover, button.regular:hover{
    background-color:#dff4ff;
    border:1px solid #c2e1ef;
    color:#336699;
}
.buttons a.regular:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

Catatan :

Saya beranggapan bahwa file gambar dan file style.css disimpan satu folder dengan file hmtl-nya. Dan jangan lupa pastikan nama file dan letak gambar sudah benar dengan kode yang diketikkan.

Hasil tombol yang dibuat seperti contoh dibawah ini :

Ingin Mencoba pada Jendela Baru Silahkan Klik disini.