How to create hover buttons with CSS – CASE CLOSED!

Hi,

Over the years I’ve had this minor irritation hanging over me. It’s a problem that shows up from time to time and it’s a real pain. The problem is, how to create CSS hover buttons without using Javascript.

Over the years there’s been a variety of solutions to this problem. However, it’s a challenge finding a solution that works across ALL browsers. Most of the solutions I’ve seen either do not work the way I’d like them to or they involve a lot of hastle. Frankly, I’m sick of people telling me “You won’t understand this, but just copy and paste this MESS and you’ll get hover buttons that work”. That’s not acceptable! I’m also sick of looking up solutions only to find people giving very lengthy tutorials – drip feeding little snippets of code between paragraphs.

Let’s face it, you don’t want to read a boring CSS tutorial and I’m sure you don’t want to paste in tonnes of CSS code that’s confusing and laced with workarounds for IE.

So, for the last time here is some simple code you can use to create hover button image swaps with CSS only. As far as I’m aware it’s the most simple solution available and it’s been tested on all of the latest versions of IE, Firefox, Chrome, Safari and Opera.

Here’s the VERY SIMPLE code:

(put this on your stylesheet)

#fancybtn {
background: url('../images/nav_off.gif') 0 0 no-repeat;
height:63px; width:100px;
float: right;
position: relative;
text-align: center;
line-height: 63px;
margin-left: 2px;
color: #655d5c;
}

#fancybtn:hover {
background: url('../images/nav_on.gif') 0 0 no-repeat;
height:63px; width:100px;
color: #FFF;
text-decoration: none;
}

#fancybtn a:link { color: #FFF; text-decoration: none; }
#fancybtn a:active { color: #FFF; text-decoration: none; }
#fancybtn a:visited { color: #FFF; text-decoration: none; }

All you have to do to get your page rocking is…

<a href=”http://www.dcradionetwork.com” style=”text-decoration:none;”><div id=”fancybtn”>here goes</div></a>

 

That’s it. Case closed.

Advertisements

One comment

  1. Why repeat the height and width for the hover state?
    Also this will pop first time if the hover state image isn’t cached as the hover image will be requested on first mouseover. If the height and width are set use an image sprite instead (single image with both versions on and off of the button).

    Something (similar and simple) like…

    #fancybtn {
    background: url(‘../images/nav_sprite.gif’) 0 0 no-repeat;
    height:63px; width:100px;

    }

    #fancybtn:hover {
    background-position: 0 -63px;
    color: #FFF;
    text-decoration: none;
    }

Leave a Reply

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

%d bloggers like this: