CSS, Website Design

CSS Button – (One SWEET CSS Button)

Leave a Reply

It is true: “You can make a button a million different ways.” There are also as many ways to create a button that will change when you hover your mouse over it. You can use JavaScript, CSS (Cascading Style Sheet), plain HTML, etc. But each one has it’s own problems:

Javascript button: Search Engines have a tough time with JavaScript. I recently started working with a new client who’s menu bar was made entirely with JavaScript, and even though he had 10 or so pages, Google only new about his home page.

HTML/Javascript button: The “onmouseover= and then call in a new image” works pretty well, but you will notice a half second delay or so, because the image has to load. (Yes, you can have the button’s load with the site numerous different ways, but that’s adding lots of random annoyances that you don’t have to deal with.)

CSS button: You can also use CSS to load a new images when someone “a:hover”s over your button.

Here is the best way to make a button that changes when your mouse hovers over it (And yes it uses CSS! Which keeps your website code nice and clean, and Search Engines Love you.) This CSS button technique is also 100% valid CSS and HTML!

First you make one image that has two versions of your button: 1)”Up” and 2) “Hover” side by side. Like this:

The Reason you put the two images into one image is so that the “Hover” image is loaded at the same time that the “Up” image is.

Now we need to to create the HTML. All you do is add a button class to an anchor:

<a href=”#” class=”button”>&nbsp;</a>

The button’s CSS can become a little more complicated, and sometimes (you never know when it will strike) Internet Explorer won’t do what you want… So here is the CSS that I created for this css button class:

a.button {
display:block;
width: 157px;
height: 46px;
background: url(“../images/button-home.gif”) no-repeat;
}

a.button:hover {
background-position: -170px 0
}

As you can see from this sweet CSS button, all you do is give it the correct width and height for the button in the image, and include the button image as a background with a “no-repeat.” Then when someone hovers over the button, the background image moves 170px to the left! This saves you from having to load a new image!!!

Click Here to See this CSS Button Technique in Action!

(Editor’s Note: CSS Button Sample page is no longer available.)

More Information about this CSS Button Technique

Disabled CSS Buttons

Yes, there is so much that you can do with this technique. You can add a third image, that is grayed out (so that it looks disabled), and then apply that to a “disabled=disabled” input! (Yes you can use this same sweet CSS button technique on inputs!)

But Wait, There’s More!

There is a problem with this example: you have to create a new image for every new CSS button. Here is what you do:

Instead of using an image with words on it, make an blank button image (without words). And put text between the anchors! You may need to add some extra CSS code to place the text where you want it on the CSS button.

This Sweet CSS Button Technique in use:

Here is a perfect example of this CSS Button technique reusing the same background: Database in a Flash (Yes, there is only one button image, that is reused throughout the entire program!)

Adding Animation to your CSS buttons!

I was having some trouble with a site that I developed a while ago, because the main navigation bar was made with Flash, and Internet Explorer users had to click twice on the navigation bar to get it to work. (There’s a rant for another day =]) So I was stuck with how to make this sweet flash navigation bar into CSS and HTML…. This it struck me! Just a couple days ago I came up with this sweet idea using this very technique! I made a button just like above, except it was an animated gif, and the “Up” image was motionless and the “Over” image was animated!

-That’s all for today!
-Ashton Sanders

Leave a Reply

Your email address will not be published. Required fields are marked *