Inilah Cara Membuat Tombol

Membuat tombol ada beragam cara dan berbagai model mulai dari yang sederhana sampai dengan 3 Dimensi. Tombol bisa didimanfaatkan untuk memasang link download atau dipergunakan untuk sebuah tautan.

Contoh tombol yang dimaksud, seperti dibawah ini :


DOWNLOAD


Untuk membuat tombol seperti diatas, berikut langkahnya :
Letakkan Kode CSS berikut persis diatas Kode ]]></b:skin> ( bagi yang sering obrak abrik template tentu sudah familiar dengan kode ini, tetapi perlu kami ingatkan kembali, kode ini terletak di Template Blog masuk pada Edite HTML)

Code CSS

.ls-button{
background-color:#0404B4;
font-family: &amp;amp;amp;amp;amp;amp;amp;#039;Verdana&amp;amp;amp;amp;amp;amp;amp;#039;, sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}
.ls-button:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}
.ls-button:before {
background-color:#FF0000;
background-image:url(http://img543.imageshack.us/img543/7840/lostsectorrightarrow.png);
background-repeat:no-repeat;
background-position:center center;
content:&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;quot;;
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
.ls-button:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}

Lalu, Save Template

Selanjutnya, melakukan pemanggilan terhadap kode CSS yang dibuat tadi, misalnya jika ingin meletakkan tombol pada postingan maka yang harus dilakukan adalah mengcopy kode berikut.

<a class="ls-button" href="LINK">DOWNLOAD</a>

Tulisan yang warna Hijau, ganti dengan link ketika tombol tersebut di tekan.
Tulisan yang warna Biru, ganti dengan nama tombol yang diinginkan.

Selesai, semoga bermanfaat