Effect button's in CSS:-

I am going to teach you how to make good effect button's for your page,blog or website.
As you all know it all start's with CSS & HTML.So you should have little knowledge of CSS & HTML.
It's not very tough to make this god looking hover effect buton's.



If you also want to put this good looking button's in your blog then follow some quick step's:-

As I told you that we need the help of CSS in making this type of button's.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;
}

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

• 
  
•     Go to blogger/blogspot 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
</a></div>