Cara Mudah Membuat Button

Posted by Tips Trick Blogger Friday, January 28, 2011 0 comments

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

keep spirits and do the best

Adsense Content. bottom of article