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.

<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.allbloggertricks.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.

15 comments

post Author
26 July 2013 at 11:16

please
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 .

Reply
Tushar Author
30 July 2013 at 18:12

cooooooooooooooooooooooooooooool widget .

visit my blog : http://tkpsoftwares.blogspot.in/

Reply
Pankaj Author
22 August 2013 at 22:20

Nice one just add this one on my site, thanks

Reply
Jolyn Author
23 August 2013 at 01:06

Is it possible to add image inside the circle ?

Reply
24 August 2013 at 00:14

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

Reply
25 September 2013 at 16:39

The link just does not work.

Reply
4 October 2013 at 03:15

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

Reply
tunizzz team Author
9 October 2013 at 01:10

Nice How to..

Reply
Anonymous Author
12 October 2013 at 14:51

me too . how to >>>> facebook ?

Reply
Rajesh Kuchan Author
17 October 2013 at 02:12

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
website 123LoveBook.com

1: http://www.allbloggertricks.com/2013/10/floating-social-share-buttons-for.html

2: http://www.allbloggertricks.com/2013/08/animated-page-loading-effect-for-blogger.html

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)

Reply
Lakshit Arora Author
20 February 2014 at 21:12

You have made a awesome blog tushar

Reply
8 January 2015 at 01:45

cool! haha
thanks :)

Reply
Ibrahim Lubis Author
8 January 2015 at 04:40

langsung di coba mas, salam kenal

Reply
9 January 2015 at 18:22

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

nice job :)

Reply
10 November 2015 at 05:20

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

Reply

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 |