Button Hover CSS3 Blink Cool

Button Hover CSS Blink Cool Tutorial kali ini adalah bagaimana cara membuat Tombol Blogger dengan animasi Transitional Hover yang dilengkap...

Button Hover CSS Blink Cool

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 :

4 Tombol CSS3 Animasi Unik dan Menarik Untuk Blogger

Code #CSS

Untuk penempatan kode CSS di bawah ini anda tinggal mencopynya kemudian paste ke dalam template blogger tepatnya di atas tag ]]></b:skin>

.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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1LDPicT_VGv-B-VYA7lXuizNvs4XqIyJZTdU5WN6i0BaXBWp2q53o9lqW-XNeQkb0KBM73m95c4cLw8B1u7xFg-FChTe_nfxc7uicFHdnNWiDGNErqlTeHn0cQlJ6ok2tknZ4_ws-Vjg/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));}

Wellcome To My Sitemap

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,
Seperti Gambar Di Atas

Tombol Berwarna Biru
<a class="button medium blue" href="Masukkan_Link_Disini" >Demo</a>
Tombol Berwarna Hijau
<a class="button medium green" href="Masukkan_Link_Disini" >Demo</a>
Tombol Berwarna Orange
<a class="button medium orange" href="Masukkan_Link_Disini" >Demo</a>
Tombol Berwarna Abu Ab
<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 anda .
Demo silahkan anda ganti. Anda bisa menggunakan kata Download, Info, More dan lain sebagainya.