Create mouse hover effect for button using CSS sprite

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

 

 

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:

 

 

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.