CSS Transition Effect Badge with Pure CSS for Blogger

This is often require to create some badge for our blog to display at the blog sidebar. Most of the blogger use a small image as badge which is not so attractive. So I have designed a beautiful animated CSS badge with transition effect. This is basically a simple CSS trick which will add some extra spice into your blog. When any visitors will mouse over on the badge then it will open just like shutter and with multicolor and your blog name will be visible. In addition your blog name will be clickable that means when anyone click on the badge it will redirect to your blog or you can add some other link if you want to redirect something. Hope this small widget will help your to make your blog more attractive.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<style>
.BloggerSpiceCSSBadge{background:#fff;border-radius:10%;cursor:pointer;position:relative;width:15em;height:5em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.BloggerSpiceCSSBadge h1{color:rgba(8,172,233,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:3em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.BloggerSpiceCSSBadge h1 a{color:rgba(8,172,233,0);text-decoration:none}
.BloggerSpiceCSSBadge:before,.BloggerSpiceCSSBadge:after{border-radius:10%;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}
.BloggerSpiceCSSBadge:after{transform:rotate(45deg)}
.BloggerSpiceCSSBadge:hover:before,.BloggerSpiceCSSBadge: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)}
.BloggerSpiceCSSBadge:hover > h1 a,.BloggerSpiceCSSBadge:hover > h1{color:rgba(8,172,233,1)}/* Widget by www.bloggerspice.com */
</style>
<div class="BloggerSpiceCSSBadge">
 <h1><a href="http://www.bloggerspice.com">BloggerSpice</a></h1>
</div>

Customization

• Replace bloggerspice.com with your blog address.
• Change BloggerSpice with your blog name