Blog Badge dengan Effect Menggunakan CSS. Berikut ini kami akan membagikan Badge atau lencana yang dapat anda gunakan untuk mempercantik tampilan blog anda. Misalya anda ingin mempercantik title blog anda ataupun menggunakannya untuk widget blogger anda.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 dan kodenya CSSnya.
LIVE DEMO :
CSS :.circle{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAPlWQOaQKQmo4RXgmtyQ_X3aIpiGp9SYRowCSbpFjRN-FRKGOvyrcp83eGZFYs1mxZ38Q_Qpv7TNnjplzV3dCc0DfAs2RWLSbmyVxRrGLrEAB_v8hBe_y9T5VWylPFtLJCW356_lT78Nr/s310/507cc1.gif);border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{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 h1 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 > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
HTML :<div class="circle">
<h4>
<a href="http://www.seocips.com">seocips</a></h4>
</div>
Sekian sobat yang dapat dibagikan untuk saat ini, lihat juga Tutorial blog terbaru yang lainnya. Semoga cara membuat blog badge dengan efek CSS ini bermanfaat. Ok selamat mencoba. Happy Blogging Salam Blogger. . .