Cool Badge with CSS Effect for Blogger

Posted On // 15 comments

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.

.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: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)}
<div class="circle">
  <<h1><a href="">Your Blog</a></h1>

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.


post Author
26 July 2013 at 23:46

when I change the text/URL in Bold
the link I past is not load .
i was try with other links too .
please ...
i want to past my face book link
can i chang to go to my fb .

Tushar Author
31 July 2013 at 06:42

cooooooooooooooooooooooooooooool widget .

visit my blog :

Pankaj Author
23 August 2013 at 10:50

Nice one just add this one on my site, thanks

Jolyn Author
23 August 2013 at 13:36

Is it possible to add image inside the circle ?

Dhiraj Author
24 August 2013 at 12:44

Yah you can just add img HTML inspite of h1 HTML.

26 September 2013 at 05:09

The link just does not work.

4 October 2013 at 15:45

I want to add a attractive footer to my blog just like you so can you please help me with that??

tunizzz team Author
9 October 2013 at 13:40

Nice How to..

Anonymous Author
13 October 2013 at 03:21

me too . how to >>>> facebook ?

asas Author
17 October 2013 at 14:42

First of all i want to thank for your website you have a bunch off cool and best stuff i ever had ...

I need this Gadgets for my



3: Sticky Menu Bar

4: Header Email Subscription Gadget

(I have already sent you Emails regarding this but ur not responding ... plzzz help me to get this)

Unknown Author
21 February 2014 at 10:42

You have made a awesome blog tushar

8 January 2015 at 15:15

cool! haha
thanks :)

Ibrahim Lubis Author
8 January 2015 at 18:10

langsung di coba mas, salam kenal

10 January 2015 at 07:52

I didn't think things like this are made entirely with CSS...

nice job :)

10 November 2015 at 18:50

I really be grateful for your blog, you have completed the great job. Thanks for the bunch of excellent resourceful site.


Post a comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Cool Badge with CSS Effect for Blogger |