Recently we shared Beautiful Circular Blog Badge with CSS Effect for Blogger with you and today we are going share another badge for your blog. The previous badge was in circular shape but this one is in square shape and it'll definitely fit in your sidebar. When hovered this widget displays your Blog name or whatever you've written. This badge is almost completely based on CSS and works on CSS transitions. This badge is extremely attractive and will force you visitors to hover on it to see what happens on hover. A live demo of this widget can be seen below:
Important Note: Our Facebook page has been suspended, so we request you to join us on our new Fan Page

Blogolect

How to Add this Badge to your Blog

First of all log in to your Blogger Account, select your Blog, go to Layout >> Add a Gadget and select HTML/JavaScript gadget from the list of Gadgets. Copy (Ctrl + C) the below code and Paste (Ctrl + V) it in the empty widget box

<style>
.square{background:#fff;border-radius:4px;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.square 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}
.square h1 a{color:rgba(189,185,199,0);text-decoration:none}
.square:before,.square:after{border-radius:4px;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}
.square:after{transform:rotate(45deg)}
.square:hover:before,.square: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)}
.square:hover > h1 a,.square:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="square">
<h1><a href="Your Link Here">Your Text</a></h1>
</div>