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:
(This button used courtesy of www.tophorseconnection.com)
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”> </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:
background: url(“../images/button-home.gif”) no-repeat;
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!!!
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! You can check it out at Fiditz.com!
-Thats all for today!
This post was written by Ashton