Modifying Button using CSS

Hai teman - teman, cape juga ngetik terus. tapi gpp banyak yang bilang. Awal dari kesuksesan adalah niat. Walaupun niat itu diawali dari repost ulang, dengan bahasa kita. Yang penting kita sudah lebih mengerti dan ingin berbagi ilmu dengan orang lain. Akhirnya selesai juga. Bagaimana cara membuat Button atau tombol yang lebih dinamis seperti yang dibawah ini :

Jangan dipikir susah teman - teman, caranya mudah. Hanya dengan kita tempelkan saja code CSS dibawah code Button dasar nya. Mudah kan

Kita langsung aja ke permasalahannya. Dengan dimulai dari :

Code 1

.sbtn {
background-image: url(http://kimblog.co.cc/wp-content/uploads/2008/09/button.gif);
border: 1px solid #000033;
height: 22px;
width: 82px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight: bold;
background-position: center;
padding: 0px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px;
}

Setelah itu kita tempel aja class sbtn td pada saat bikin button :

Code 2

<input class="sbtn" name="submitBtn" type="submit" value="new Button" onClick="alert('it works')"/>

Coba anda lihat hasilnya, memuaskan bukan. Untuk pemilihan background warnanya dapat anda buat sendiri tentunya. Membuatnya dengan menggunakan photoshop. Mudah kan teman - teman. Asal ada kemauan pasti bisa. Have nice try

Good Luck