Cara Membuat Tombol Keren

Senin, 22 April 2013

Hari ini saya akan share ilmu walaupun itu hasil blogwalking dari lost sector tapi tak apalah itu juga niat saya untuk berbagi, oke langsung sajaaa..

1. Masuk ke blogger
2. Pilih template
3. Pilih edit html
4. Cari kode ]]></b:skin>
5. Salin kode css dibawah ini:

.ls-button{
background-color:#0404B4;
font-family: 'Verdana', 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL8mWGfQVc-wdIsm45rYYwEKYVxCG1htG28ij8BOub5K9Uj4Ft_hiERiT7CuOZSJ1kJ5fyaIB5ujh1q9yYJNcHFcCwB8ikkOHmUBBC-imom08QS9oO9Coni-s4878sGe9n-1mbWjzO__Od/s1600/lostsector-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
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;
}

5. Selesai

Cara Menggunakan Tombolnya

<a class="ls-button" href="link anda">Nama linknya</a>

Saya kira cukup sekian pembahasan kali ini, Terima kasih telah berkunjung salam blogger

Sumber: Lost Sector