If you struggle with this tutorial, un-like any other tutorial websites, we offer live support chat in which we will go through the steps/process with you live. just click on the live help chat button to the left of your screen.

In this tutorial we will teach you how to create a basic rollover button, using adobe photoshop and also steps on how to implement it into your website layout using css.

Step 1: The first step in this tutorial is to create a new document in photoshop with the following attributes: 70 pixel's in width, and 35 pixels in height. You may set the background color to what you wish, but in this one i have gone for a creamy color.

The next step is to create the actual button layout, select the shape tool and click on the rounded rectangel tool. You can also fill in the background of it or add a gradient effect by going to > Layer > Layer style > Gradient overlay. Then you will have something like this below;

Step2: Now you can add a little icon that may be related content that your button is linking too, you may use my image by clicking here.

In this tutorial i have decided not to add a little icon, just to keep it simple for other users, instead i have just used a basic text title (In this tutorial called tutorials)

Step3: Its now time to save your image, save your image as button.gif or .jpg its your choice.

We are now going to do the second part of the tutorial which is to create the rollover effect, I have simply gone back to layer > layer style > gradient overlay and selected a different gradient color, and this is my outcome for button2.gif:

Now here comes the most important section of the tutorial! The coding below can be copied and pasted, its fine with me, but the whole point is to learn!

First off we need to create code the for the image;

The Code below basically shows the image in which to swap the original with, and also with which command, in our case on mouseout/mouseover.

<a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','rollovers/button.gif',1)">

The second part of the coding displays the original image

<img src="rollovers/button2.gif" alt="Tutorials" name="Home" border="0" id="Home" />

The alt tag "Displays the description of the link when a user rolls over it with there mouse".

There is over methods of displaying your rollover button, but this method is the most common and prefered.

When you have inputted your code into your webpage, this is what you button should look like below:

I understand this tutorial was rather simple, but the main point and meaning to this tutorial is to illustrate a different method of creating a link to inner content pages on your website. Depending on your knowledge of adobe photoshop you can create far better graphics than the one i have just created, although the one i created is very simple/easy and understandable for users that are new to Adobe Photoshop & CSS/HTML.

I hope you enjoyed this tutorial, and also helpfull, please keep checking back for other fantastic tutorials.