Navigation Buttons with Rollover

This tutorial with guide you through how to make navigation buttons that rollover:


Finished Button

See this button in use


Create a new document 80x50 with a transparent background


Set the background to whatever you want to use for you navigation bar. You can keep this transparent if you want but just remember about IEs problems with transparent PNG files.


Create a new layer and fill with Black (#000000). Press Ctrl + T to bring up the transform toolbar.


Set the height to 50%.


Press Enter.


This makes the rectangle 1/2 of the height. Now press Ctrl + T again and set to 95% width and 80% height:

transform button

Press Enter.


Press Ctrl + J to duplicate the layer and move it down so there is the same distance below the duplicated layer as there is above the original layer.

buttons layout

The top button will be the original button and the bottom button will be the rollover button.


Right click the original layer and press Blending Options.

Set these Blending Options:

gradient overlay

gradient editor

#293244 to #324260




Right Click the layer again and press Copy Layer Style.

Then right click the duplicated layer and press Paste Layer Style.


Right click the duplicated layer and press Blending Options


Change the gradient to a different color.

rollover for gradient

#006699 to #0066BB


Go To File » Save for Web and save as either a JPG or PNG for better file quality to size.

Navigation Button Finished

This can then be used as a rollover button using CSS. To see how to do this read my CSS tutorial here (coming soon)