Membuat Icon Button Multi Guna Dengan CSS3

Membuat Icon Button Multi Guna Dengan CSS,itulah yang akan saya bahas pada kesempatan kali ini,button ini mempunyai banyak fungsi yang bisa sobat gunakan unutk memperindah tampilan blog seperti yang terlihat pada gambar di samping
bagi sobat yang penasaran dengan tampilannya bisa lihat demonya disini,gimana tertarik bukan ya udah langsung aja ikuti tutorialnya di bawah ini.

Silahkan download CSS3 Code Snippet DISINI

1. Login terlebih dahulu ke akun blog sobat.
2. Pilih menu Template > Edit HTML
3. cari kode ]]></b:skin> dan letakan kode snippet yang sobat download di atas kode ]]></b:skin>.


Langkah pertama sudah selesai sekarang giliran cara pemasangan dalam widget

1. Pilih Tata Letak > Add Gadget > HTML/Javascript
2. Copy kode di bawah dan letakan pada kolom konten HTML,dan pilih salah satu sesuai kebutuhan sobat.

<a class="my-button medium blue" href="#"><img alt="" src="images/btn_info.png" />Information</a>
<a class="my-button medium green" href="#"><img alt="" src="images/btn_ok.png" />Success</a>
<a class="my-button medium orange" href="#"><img alt="" src="images/btn_warning.png" />Warning</a>
<a class="my-button medium red" href="#"><img alt="" src="images/btn_error.png" />Error</a>
<a class="my-button medium black" href="#"><img alt="" src="images/btn_add.png" />Add New</a>

<a class="my-button medium green" href="#"><img alt="" src="images/btn_down.png" />Download</a>
<a class="my-button medium purple" href="#"><img alt="" src="images/btn_up.png" />Upload</a>
<a class="my-button medium dark" href="#"><img alt="" src="images/btn_help.png" />Help</a>
<a class="my-button medium terra" href="#"><img alt="" src="images/btn_delete.png" />Delete</a>

Keterangan :
pada tanda # ganti dengan url Link sobat

Demikian tutorial kali ini semoga bermanpaat.

Bagikan Artikel ini