Twitter Style Hover Button Recreated in Pure CSS


Best Movies Sites: TOP 10 MOVIE WEBSITES


Twitter Style Button
I have shared many blogger widgets related to CSS and CSS3. Few days ago I had shared Google+ style buttons for your blog/website. Today let me share Twitter style CSS buttons with hover effect. I really like this buttons because of its neatness and professionalism. Even you can use this button as a message box. Let's see how it could be made on your blog Post.

You can see the live demo of Twitter style hover button below, before we get into this trick and get a complete preview of what we are gonna make here. Just hover your mouse point over below button to see feel the change.





 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>


NB: If you wanna add more buttons near by add the above HTML code snippet after </a>. Also replace Your Link URL with your via Link and Button Text with your via message text. The dimensions of your button will adjust automatically according to your button text.