Cool Badge with CSS Effect for Blogger

Dhiraj Barnwal Tuesday, 28 May 2013 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.
Labels:
Google+ Pinterest

15 Comments to Cool Badge with CSS Effect for Blogger Post Yours! Read Comment Policy ▼

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 .

cooooooooooooooooooooooooooooool widget .

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

Nice one just add this one on my site, thanks

Is it possible to add image inside the circle ?

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

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

me too . how to >>>> facebook ?

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)

You have made a awesome blog tushar

langsung di coba mas, salam kenal

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

nice job :)

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