HOVER EFFECT BUTTONS IN CSS

Today I am going to teach you how to make good hover effect buttons for your page,blog or website.
As you all know it all starts with Css & Html.So you should have little knowldge of Css & Html.
Its not very tough to make this god looking hover effect butons.

Google

Lord Html

Hover Me

If you also want to put this good looking buttons in your blog then follow some quick steps-



As I told you that we need the help of Css in making this type of buttons.Below are some Css codes copy that code in your website.

a.hupt:link {
color: #6E6E6E;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 white;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #F3F3F3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1));
border: solid 1px gainsboro;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin-right: 10px;
text-align: center;
width: 70px;
transition: width 1s;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
}

a.hupt:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
width: 160px;
}

Where To Paste This Code????
If you don't know where to paste this code i will teach you follow the steps-

• Go to blogger dashboard.
• Now open template designer.
• After opening  template designer go to Advanced>Add Css.
• And there paste the code.

Now where You Want to show this button here is Html code paste the code the button will start appearing.

<div class="testbutton">
<a class="hupt" href="YOUR-URL">FB
</div></a>