KLIPING DUNIA: Cara Membuat Tombol Keren [Cool Button] untuk Blogger

Membuat salah satu tombol atau button pada blog adalah sebuah hal yang tidak jarang sahabat bloggers lakukan. Hal ini disebabkan oleh karena adanya beberapa kebutuhan para blogger untuk membuat sebuah postingan pada blog agar terlihat menarik dengan menggunakan sebuah tombol, baik itu tombol yang berisikan link seperti link download, live demo, next, home, previous atau yang lainnya.

Nah, pada kesempatan kali ini, saya akan memberikan sebuah tips kepada sobat tentang bagaimana cara membuat tombol keren atau dalam bahasa inggrisnya cool button yang sudah dimodifikasi sedemikian rupa sehingga hasil yang ditampilkan berbeda dari tombol-tombol yang lain. Berikut contoh gambar dan live demonya.

Cara Membuat Tombol Keren [Cool Button] untuk Blogger

LIVE DEMO

Bagaimana, sobat tertarik? Jika sobat tertarik, perhatikan cara pemasangan dan penggunaan tombol ini pada postingan blog.

Langkah pertama, login ke Blogger

Pilih Template » Edit HTML » Proceed

Copy kode CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>

.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/AVvXsEij2ZAb8GQXJSQSvX2ED0ZPcFiAcNne_Mri0HZIYyMGh5oZc67xDvdpTKIPtg-IaZSgCTtC-5hEMeVST1mkjT3OAr2NSWHSJ9L8QNqw_bIgOonlVDJlk6r7i-FqPjFweAnQlVp0QnSPh8BN/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;

}