Membuat Variasi Pada Button

Salam Blogger…Kali ini saya akan membagikan cara membuat button dengan sedikit variasi…mungkin sobat semua bosan dengan button yang tampilannya hanya biasa saja, Biasanya dalam sebuah blog akan terdapat link download dan demo, tapi hanya menggunakan tulisan saja.

Nah dengan adanya sedikit variasi button ini maka akan memberikan warna baru pada link download,,dengan adanya button ini tampilan blog anda akan sedikit berbeda dari biasanya…

untuk pembuatannya silahkan lihat dibawah ini :

Langkah-langkahnya :

• Masuk ke blog sobat
• Jangan lupa melakukan backup template.
• Pilih rancangan edit HTML,
• Ingat jangan langsung diklik edit html, tapi pilih yang sesuaikan…
• Kemudian pilih yang tingkat lanjut
• Pilih Tambahkan CSS
• Letakkan script dibawah ini dalam kolom tersebut

DEMO

.tsabtn {
cursor:pointer;
border:2px outset #adb5c9;
background-color:#ffffff;
padding:10px 14px;
-webkit-border-radius:11px;
-moz-border-radius:11px;
border-radius:11px;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
color:#0f090f;
font:normal 18px 'Showcard Gothic',Helvetica,Arial,Sans-Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
}

• Dibawah ini adalah script untuk memberikan sedikit efek, efek ini akan kelihatan ketika mouse diarahkan ke button tersebut…
• Letakkan script dibawah ini tepat sesudah sript yang baru anda masukan

.tsabtn:hover {
border:1px solid #8a8c91;
background-color:#ffffff;
color:#524a52;
}

• Kemudian klik tombol terapkan ke blog.
• Cara menggunakan tombol button tersebut :
• Buat entri bari atau postingan baru, kemudian pilih mode HTML (ingat bukan mode compose)

<a href="alamat url tujuan" target="_blank" title="download"><span class="tsabtn">Download</span></a>

• Silahkan anda rubah tulisan yang berwarna merah. 

Selesai sudah pembuatan button dengan sedikit variasi, semoga artikel ini bisa bermanfaat buat sobat semua….salam blogger…