Cara Membuat Blog Badge Dengan CSS di Blog

Blog badge berikut ini berbentuk lingkaran dangan transisi Css yang indah berwarna warni ketika kursor mouse menyentuhnya. Jika sobat tertarik dengan efek-efek blog mungkin sobat dapat membaca artikel sebelumnya seperti widget sosial efek hover atau membuat efek gambar bergetar atau membuat efek tooltip dengan CSS.

Untuk demonya sobat dapat melihat langsung gambar dibawah ini. Bagaimana keren bukan? tertarik untuk menggunakannya? ok berikut adalah Live demo, CSS dan kode HTML nya. Ok selamat mencoba sob..

Arahkan Cursor Mouse ke gambar dibawah ini!

.circle{background:url(http://1.bp.blogspot.com/-5z-NAp4FnJY/U94OMLs-NxI/AAAAAAAAB_A/WEtVmNs-ENg/s310/507cc1.gif);border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h4{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h4 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h4 a,.circle:hover > h4{color:rgba(185,185,185,1)}

HTML Blog Badge:

<div class="circle">
<h4>
<a href="http://blog.spezer.net">seocips</a></h4>
</div>

Sekian sobat yang dapat dibagikan untuk saat ini, lihat juga Tutorial blog terbaru seocips yang lainnya. Semoga cara membuat blog badge dengan efek CSS ini bermanfaat. Ok selamat mencoba.