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.)

HTML:

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

CSS:

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

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

Advertisements
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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s