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

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

    ReplyDelete
    Replies
    1. me too . how to >>>> facebook ?

      Delete
  2. cooooooooooooooooooooooooooooool widget .

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

    ReplyDelete
  3. Nice one just add this one on my site, thanks

    ReplyDelete
  4. Is it possible to add image inside the circle ?

    ReplyDelete
    Replies
    1. Yah you can just add img HTML inspite of h1 HTML.

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

    ReplyDelete
  6. 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)

    ReplyDelete
  7. langsung di coba mas, salam kenal

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

    nice job :)

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

    ReplyDelete