Tutorial kali ini adalah bagaimana cara membuat Tombol Blogger dengan animasi Transitional Hover yang dilengkapi oleh 4 varian yang berbeda, diantaranya animasi berwarna biru, hijau, orange dan grey atau abu-abu. Berikut Screenshootnya :
Kode CSS
Untuk penempatan kode CSS di bawah ini anda tinggal mencopynya kemudian paste ke dalam template blogger tepatnya di atas tag ]]></b:skin>
<!--www.lost-sector.net lsc-buttons start-->
.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* Blue Lsc-Button */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Lsc-Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Lsc-Button */.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Gray Lsc-Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0uBCO-a5mwffdGI6WlRjOy4siuyCa6onU3Qsd4zPyUBkf-miA_ADsIS_NEwyDL3qXybq5-AyNf0Mwn1m2tiNa8j5Yz9GVKxwgDpMRuPijs8ivfpTr5enCg1SDnOVyowiZPgKw0kRSI0H/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
<!--www.lost-sector.net lsc-buttons end-->
HTML
Untuk kode pemanggil dari CSS diatas, anda hanya memerlukan beberapa kode Tag Pemanggil di bawah ini kemudian menepatkan kode pemanggil tersebut kedalam "HTML" postingan. Untuk efeknya hovernya, silahkan anda sorot tombol "LIVE DEMO" di bawah ini dengan pointer mouse anda.
Tombol Nuansa Biru
<a class="button medium blue" href="Masukkan_Link_Disini" >Demo</a>
Tombol Nuansa Hijau
<a class="button medium green" href="Masukkan_Link_Disini" >Demo</a>
Tombol Orange
<a class="button medium orange" href="Masukkan_Link_Disini" >Demo</a>
Tombol Grey
<a class="button medium gray" href="Masukkan_Link_Disini" >Demo</a>
Pengaturan
- Medium adalah ukuran Tombol Sedang, anda bisa menggantinya dengan kata "big" untuk ukuran besar dan "small" untuk ukuran kecil.
- Masukkan_Link_Disini adalah tempat untuk memasukkan link yang dituju
- Demo silahkan anda ganti. Anda bisa menggunakan kata Download, Info, More dan lain sebagainya.