Today we're going to share a beautiful badge for your blog. This badge is in circular shape and when hovered it goes through a beautiful and colorful CSS Transition and displays your blog name or whatever you've written. This badge is almost completely based on CSS and works on CSS transitions. This badge is extremely attractive and will force you visitors to hover on it to see what happens on hover. We hope that this badge will make your blog more beautiful and user friendly. A live demo of this widget can be seen below:

Blogolect

Beautiful Blog Badge with CSS Effect for Blogger

How to Add this Badge to your Blog

Step 1. Log in to your Blogger Account
Step 2. Select your Blog, go to Layout >> Add a Gadget and select HTML/JavaScript gadget from the list of Gadgets
Step 3. Now Copy (Ctrl + C) the below code and Paste (Ctrl + V) it in the empty widget box

<style>
.circle{background:#fff;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)}
</style>
<div class="circle">
<h1><a href="Your Link Here">Your Text</a></h1>
</div>