Make good hover effect buttons

I have made the hover button already on my Contact Us page, making these types of buttons are easy today because of CSS3, when we hover on the button it expands. And that make's the button look very cool, one of my friend saw the button on my Contact Page, and asked me how to make that so I am writing a post on 'How to make professional looking hover effect buttons'.

First we have to make a HTML DIV element,because I am making a single button (in my contact page i have used li property, because there was more than one button.) Below is the HTML code of the button. The HTML code is small, because all the designs will be made with CSS and CSS3.

TIP: You can give your own class="YOUR CLASS" , according to your use. You can try this code by pasting this code in notepad. Click to know how to save an HTML page with CSS link in it.

You may paste the HTML code directly into your blog any where in the HTML template code or in blog-post. Now we will define the CSS design for the class="hupt". 'Hupt' is nothing more than a unique name used to define in CSS where to put that style, so if you wish you can put any name in place of 'HUPT', but remeber you have to change the code also in CSS. See and learn more in this code. This is the CSS code, main thing to make an hover effect.

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;
}

In this code you can see a.hupt:link this says what to show when 'hupt' is left without clicking or hover, all properties of the link, like what color it should be, what should be the background, border,shadow etc. have been defined here.
To make a Good hover effect, like it's animation, the 'transition' property is the most important. Without the transition property the button will look like this.

Hover me

Although the above CSS code is not only the CSS code in the script, we also have to define, when the button name "hupt" will be hovered what width it would be changed. The CSS code will define that.

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;
}

Sweet you also pasted the hover effect code in your CSS ( Know how to create a CSS file and HTML work together) but if you have blogger you can paste these CSS code by going to Blogger Dashboard >> Template >> Customize >> Advanced Tab >> Add CSS.
Add the CSS codes in here, and then copy paste the HTML code any where in your blog or website.

Now the output will be great, If you have done all the copy paste well. See and button below.

Hover me

TIPS:
1.On the above CSS code try to make your own change, like background-color,border-radius etc.
2.You can define how much time it should take to expand by changing the 1s value in CSS code. 1s is equivalent to 1sec.
3.-webkit-, -moz-, -o-, -ms- are to define in which browser it should work, if you gave all the codes then it will work in all browsers, but some CSS3 effects don't work in all browsers, like transition don't work in IE ( Learn more about this )
4.Once you pasted the CSS codes in ADD CSS, then you can paste the HTML code anywhere and it will work, remember don't change the 'class' value, you can only change the text in it.

Make good hover effect buttons

SUBSCRIBE FOR UPDATES