You must have noticed buttons in various websites that change its appearance on mouse hover. Typical example is the download buttons in Mozilla Firefox website’s download link. Below is a tutorial to create one such button, on mouse hover the button changes its color from blue to red.
We need few things in hand: couple of buttons (one for before hover and one after hover). You can download such a set of buttons in PSD (Photoshop file) format from our download section for free. If you do not know how to use Photoshop (or do not have it); you can follow this tutorial on how to create basic 3D shapes in Windows 7 MS Paint.
So, after this step, you will get two set of buttons, exactly the same in size :
Now, we need to create CSS sprite of these images. CSS sprite is nothing but combining two images into one single image; CSS will direct which part of the image will be used for which action.
Creating CSS sprite is easy. Just go to some free online service that provides such work to do. We have used CSS Sprite Generator website to illustrate the method. You have to upload two images: first the normal and then the hover one; then click the Generate button. After few seconds you will get link to download this combined image (that is the sprite) and our required CSS code. Rename the sprite as “Download-button” for this tutorial. After practice, you can create other buttons of your own. For the above two images, we got this as a sprite:
Basically this CSS code will only say you specific position of the buttons; it is not the full CSS code we need. Here is the full CSS code (for the button we have used):
/***** Download-button ********************/
background-position: 0px 0px;
background-position: 0px -80px;
We have marked the codes with different colors which you need to change.
width and height: It is simply the dimension of one individual button. To know this dimension; simply right click on any of your button images (not the sprite!) in Windows 7 and click Properties. In the Properties dialog box, go to Details tab and you will get the dimension. Replace with our digits with your digits. Do everything in Notepad, not in Wordpad or Word. For Mac, just clicking and selecting it will show the dimension on right hand panel.
background: url: It is simply the root relative url ( root is css ) of your image sprite. Upload to whereever you want and put the url there. For self hosted WordPress blogs / sites; you can use url in the form we have used. Others can put the full url (with http) there.
background-position: You will get that value from CSS sprite generator website. Just replace it. Do not copy-paste the whole CSS from there.
Put the completed CSS code to your CSS file (better to put at the end, if you mess something, you can find it out easily!) ; for Bloggers, go to HTML editor, put this code where all CSS codes ends and HTML codes begins (generally in the middle part). Though there is no hard and fast rule, it is better to keep the things tidy.
Save the CSS file (or HTML editor in case of Blogger).
Now, go to write a new post (use HTML mode). This is the required xHTML code:
<a class="rollover" title="Download-button" href="your target url here"><span class="displace">Download-button</span></a>
Replace the text “your target url here” with the link url you want and the text “Download-button” with the text you want to appear in case the image load is off in user’s browser (or can not load due to low bandwidth, mobile devices etc.). Save it. Only the text will appear when you switch from HTML to Visual mode (in WordPress). Click “Preview” and you will get your custom button with hover effect.
For advanced users: You can set the position of the button from the last parameter of the CSS code.
Note for Windows users: When copy-pasting the the xHTML code, after pasting sometimes class=”rollover” and span class=”displace” disappears; to avoid this, copy the code then paste to Notepad, again copy from Notepad and paste to your website’s writing panel in HTML mode. Check if it disappears or not! If still disappears, manually type the codes. Otherwise, obviously it will not work.
For example, in Colored Tick Mark post we have shown how to use Icon-Font with colored appearance. So, you probably love to read Using Icon-Font with WordPress. We can render the icon easily, like this clip icon :
We can make it red :
Default, example :
Additionally, performing a search on this website can help you.
We can exclude from the hyperlink :
You can make the fonts in Data URI format like we do for fonts
Also, HTML5 will normally give nice button if we define in CSS3, like we have al around this website. There is no image but pure CSS.
As were talking about how to create mouse hover effect for button using CSS sprite, we are not discussing the Icon-Font part here.
I notice that in IE the rollover image shifts 1 pixel. It looks fine in FF, Safari and Chrome. Is there a fix?
IE 6 like few problems are back in new form IE 8 (I HOPE they will be in IE 9, I have not tested) causing headache of the webmasters and developers.
I have to write a few things before starting the IE fix sad songs.
There was a fix for IE 6 (which MS claimed as the best browser ago) but that does not work for IE 7 or IE 8. People “discovered” another fix for IE 7, that does not work in IE 8. Now IE 9 (Beauty of the ? ) : I must admit, I found no fix anywhere. Now the sad song starts:
1. IE 6: add
2. IE 7:
They says in MSDN blogs hover things will only work on xHTML STRICT declaration in the header as W3C says STRICT is better than TRANSITIONAL.
3. IE 8 (may or may not work for IE 7):
Add this before background url starts defining hover:
filter: none !important;
So the thing for hover becomes:
filter: none !important;
background: url(images/yournicebutton.png); background-position: 0px -80px;
4. Other things:
You can use the same background color of the button in addition to hide the bald area. For unknown reasons (to me) IE loves gif; no problem occurs with gif. These are exclusive with transparent png.
Here only 2 button, hover and normal button. If we want to add one more button eg clicked button (normal, hover and when we press the button) how to do that? I want to use it on my blogger web, thanks
You want to add three states : Normal, Hover and Active. That is the same like above. Just you need to define the CSS property of hover state.
1.Create one image sprite with three button images instead of two like above.
2. add one additional :
You can add another : a.visited. For example, once clicked it become dimmed.