Make Colourful Rollover Buttons

Make Colourful Rollover Buttons

This tutorial with guide you through how to make a navigation bar for your site with rollover buttons. This tutorials takes in to account that you have a reasonable knowledge of Photoshop:

View Example


Create a new document which ever size you want your navigation bar. For the purpose of this tutorial I will just be doing one button, the same technique can be applied to make a whole navigation bar.


I am making my button 80x40 in dimension


Create a new layer and make a Rectangle that takes up most of the canvas.


Right click the layer and click Blending Options. Use these options for your button. The colours are a variable.

(Click for larger version)


Colour: Black (#000000)


(Click for larger version)


Colour: #99FFFF


(Click for larger version)


Colour: #003399


(Click for larger version)


Highlight: White (#FFFFFF)

Shadow: #000099


(Click for larger version)


(Click for larger version)


(Click for larger version)


(Click for larger version)


Colour: #66CCFF to #0066CC


(Click for larger version)


Colour: #000000


This will make the backing to our button.


Now add the text for your button.


This is our original button which will be displayed in its normal state.


Now go to File » Save for web and save as a JPEG High


Now we will make some modifications for the rollover.


For my button, I am going to make it chage from Blue to Red on the mouseover


To do this right click the layer again and instead of using different shades of blue, I am using different shades of red. So if there is a dark blue, I will use a dark red and so on


Now we have our rollover image, do the same and save as a JPEG but chose a different name.


Now in your HTML editor put this javascript into your <head> section:



To preload the images when the page loads, add this code within the <body> tag so it looks like this:



For the actual rollover code it self, you use this:


<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','button_roll.jpg',1)"><img src="button_norm.jpg" alt="Home" name="Home" width="80" height="40" border="0" id="Home" /></a>


For an example page go here