Cara Membuat Button

Nih gan posting ringan, kita kupas bagaimana cara sederhana membuat button. Cara ini mungkin dianggap sederhana, namunterkadang diperlukan dalam postingan. Kalau gak yah hitung-hitung untuk bacaan ringan bermanfaat. Ok gan langsung aja kita kupas cara membuat button sederhan. Langkahnya seperti di bawah ini.

Kita gunakan script sederhana seperti di bawah ini

<button type="button">Klik di sini untuk melihat demonya</button>

Hasilnya akan seperti ini

Ada beberapa kode lainnya juga agar Button yang kita buat bisa lebih menarik, misalnya menggunakan kode seperti ini :

<button type="button" style="background:#A9A9F5; color:red; font:bold 20px Verdana, Geneva, sans-serif; margin:5px 0 5px 0; padding: 0 10px 0 10px;">Klik Disini !</button>

Hasilnya akan seperti ini

Kita lanjutkan dengan kreasi seperti ini

<button type="button" style="background: #f5f6ce; -moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; color:red; font:bold 20px Verdana, Geneva, sans-serif; margin:5px 0 5px 0; padding: 0 10px 0 10px; border:2px solid #FA5858">Klik Disini !</button>

Keterangan :

• background : warna latar button.
• color : warna tulisan/text.
• padding : Jarak tepi button dengan teks di dalamnya, 0 10px 0 10px artinya padding atas bernilai atau = 0; kanan = 10px; bawah = 0; kiri = 10px.
• margin : jarak button dengan tepi bidang gambar ke luar, 5px 0 5px 0 artinya margin atas = 5px; kanan = 0; bawah = 5px; kiri = 0.
• font : huruf dan style text yang di gunakan
• Button ini masih bisa di kembangkan sesuai dengan keinginan anda
• Selamat mencoba dan sukses selalu

Source: Cara Mudah Membuat Button - blogonol http://blogonol.blogspot.com/2011/01/cara-mudah-membuat-button.html#ixzz1IzkYB9CZ
Under Creative Commons License: Attribution