Easy Button Rollovers

A quick and easy cross-browser rollover effect for buttons. (Hover style will only work on links not on inputs for IE6.)


<a href="" class="button">Go!</a>
<input class="button" type="submit" value="Submit">


/* Sample Button Styles */
{background: blue;
border: 1px outset;
color: white;
cursor: pointer;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 4px 8px;}

/* Rollover Effect */
{filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
-khtml-opacity: .75;
-moz-opacity: .75
opacity: .75;}

Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s