Twitter Style Hover Button Recreated in Pure CSS

 How to add this button to your blog post

 

At first we have to add the skin of these both buttons. that's adding CSS part into your blogger template. Lets see how to do it.

• Go to Blogger Dashboard > Template
• Backup your Template before making any changes to your blog
• Click on Edit HTML
• Tick Expand Widget Templates
• Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.btn {
position: relative;
display: inline-block;
overflow: visible;
padding: 5px 10px;
font-size: 18px;
font-weight: bold;
line-height: 18px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #CCC;
background-repeat: no-repeat;
border: 1px solid #CCC;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.5);
box-shadow: 0 1px 0 rgba(255, 255, 255, .5);
text-decoration: none !important;
margin-top:15px;
margin-left:5px;
}

.tgtwit-btn {
color: white !important;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
background-color: #019AD2;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear,left top,left bottom,from(#33BCEF),to(#019AD2));
background-image: -moz-linear-gradient(#33BCEF,#019AD2);
background-image: -ms-linear-gradient(#33BCEF,#019AD2);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#33BCEF),color-stop(100%,#019AD2));
background-image: -webkit-linear-gradient(#33BCEF,#019AD2);
background-image: -o-linear-gradient(#33BCEF,#019AD2);
background-image: linear-gradient(#33BCEF,#019AD2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bcef',endColorstr='#019ad2',GradientType=0);
border-color: #057ED0 !important;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.tgtwit-btn:hover {
color: white !important;
background-color: #0271BF;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear,left top,left bottom,from(#2DADDC),to(#0271BF));
background-image: -moz-linear-gradient(#2DADDC,#0271BF);
background-image: -ms-linear-gradient(#2DADDC,#0271BF);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#2DADDC),color-stop(100%,#0271BF));
background-image: -webkit-linear-gradient(#2DADDC,#0271BF);
background-image: -o-linear-gradient(#2DADDC,#0271BF);
background-image: linear-gradient(#2DADDC,#0271BF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2daddc',endColorstr='#0271bf',GradientType=0);
border-color: #096EB3 !important;
}

Save your Template and we have successfully added the skin of Twitter style hover button. Use the following HTML code snippet to add this button to your website/blog post.

<a class="btn tgtwit-btn" href="Your Link URL">Button Text</a>