Cool Badge with CSS Effect for Blogger

So today I am going to show how you can add a Cool Badge which is in shape of a circle. When hovered over it, a CSS transition takes place and we can see a beautiful effect. These effects are seen in JavaScript and rarely in CSS.

 

 

The CSS is beautifully coded and the transition works because of the pseudo elements i.e. :after :before. Other than that browser hacks are used in it. This badge is extremely attractive and will force users to hover on it. You can add this widget in between the posts or in the sidebar. A quick live and working demo of this widget can be seen just below.

 

 

To add this badge to your sidebar/posts or anywhere where  HTML is supported just add the below code.

<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="http://www.syedkhurramaali.blogspot.com">Your Blog</a></h1>
</div>

After Adding the Code change the text/URL which is in Bold and add your desired text/URL.

You are done now. Now you and your blog visitors can see this Cool Badge with CSS Effect in your blogger blog.

Don't Forget, Must Follow On Twitter @GoldenWords_UK

Posted in: Blogger Tricks, CSS, Social Media