Free Buttons Sets
Hover Color Change Effect

This gallery of buttons can be used to create the hover color change effect without using complicated javascript.

Use simple HTML code and CSS to to create the effect in your navigational links.

Three versions of each set are provided. The first is for use on a white background. The second is for black or dark colored backgrounds. The third works best on grays or light pastels.

If you install your buttons and there is a white fringe around the button you should try a different version of the same button. All buttons have transparent backgrounds.

Code and instructions provided below.

Set 1

Button1White Back

Button1 White Back

Button1 White Back
Use on White Background

Button1Black Back

Button1 Black Back

Button1 Black Back
Use on Black or Dark colors

Button1Ntrl Back

Button1 Ntrl Back

Button1 Ntrl Back
Use on Light Pastels

Set 2

Button2 White Back

Button2 White Back

Button2 White Back
Use on White Background

Button2 Black Back

Button2 Black Back

Button2 Black Back
Use on Black or Dark colors

Button2Ntrl Back

Button2 Ntrl Back

Button2 Ntrl Back
Use on Light Pastels

Set 3

Button3 White Back

Button3 White Back

Button3 White Back
Use on White Background

Button3 Black Back

Button3 Black Back

Button3 Black Back
Use on Black or Dark colors

Button3Ntrl Back

Button3 Ntrl Back

Button3 Ntrl Back
Use on Light Pastels

Set 4

Button4 White Back

Button4 White Back

Button4 White Back
Use on White Background

Button4 Black Back

Button4 Black Back

Button4 Black Back
Use on Black or Dark colors

Button4Ntrl Back

Button4 Ntrl Back

Button4 Ntrl Back
Use on Light Pastels

Set 5

Button5 White Back

Button5 White Back

Button5 White Back
Use on White Background

Button5 Black Back

Button5 Black Back

Button5 Black Back
Use on Black or Dark colors

Button5Ntrl Back

Button5 Ntrl Back

Button5 Ntrl Back
Use on Light Pastels

Set 6

Button6 White Back

Button6 White Back

Button6 White Back
Use on White Background

Button6 Black Back

Button6 Black Back

Button6 Black Back
Use on Black or Dark colors

Button6Ntrl Back

Button6 Ntrl Back

Button6 Ntrl Back
Use on Light Pastels

Set 7

Button7 White Back

Button7 White Back

Button7 White Back
Use on White Background

Button7 Black Back

Button7 Black Back

Button7 Black Back
Use on Black or Dark colors

Button7Ntrl Back

Button7 Ntrl Back

Button7 Ntrl Back
Use on Light Pastels

The HTML Code and CSS

HTMLCSS
<td id="button4n" align="center" style="background-color: #afafaf">
<p><a href="url">Button Text</a></p>
<p><a href="url">Button Text</a></p>
<p><a href="url">Button Text</a></p>
</td> 		/* Button Settings */
#button4n p {text-align: center; text-indent: 0px; margin: 0 0 0 0; padding: 0 0 0 0; background-color:#afafaf }
#button4n img {margin: 0 0 0 0 }
#button4n a {display: block; background-image : URL(button-hs4a-n.png); background-repeat : no-repeat; width:181px; height:32px; text-align: center; padding: 7px 0 0 0;margin:0 0 0 0}
#button4n a:hover {display: block; background-image : URL(button-hs4b-n.png); background-repeat : no-repeat; width:181px; height:32px; text-align: center; padding: 7px 0 0 0;margin:0 0 0 0}
/* Text Settings */
#button4n a { font-family:arial,serif; font-style: normal; text-decoration:none; font-weight: 500; font-size:8pt; color: #6699cc }
#button4n a:hover { font-family:arial,serif; font-style: normal; text-decoration:none; font-weight: normal; font-size:8pt;color: #336699 }

The HTML code for the color change effect using 2 buttons is very simple. Most of the change is controlled using the style sheet.

Instructions

This is the actual code for Button 4 for Neutral Backgrounds.

Copy the HTML code into your web page. See Tutorial HTML Tables

Copy the CSS into an embedded or linked style sheet. See Tutorial Style Sheets

Copy the buttons that you want to use. Right click on the 2 individual buttons displayed to the right of the demo set and choose Save Picture As. The images are in PNG format.

If you change the cell ID in the code, be sure to change it in the style sheet.

Under Button Settings, change the image file names to the buttons that you choose. Be sure to include a proper path to the buttons.

If you need to adjust the space between the buttons, increase or decrease the height setting. (Under button Settings)

The background color of the cell should be changed in the HTML code and in the style sheet for the background color of the paragraph selector. (Under Button Settings)

Vertical centering of the text on the buttons is adjusted by changing the padding attribute in the a and a:hover selectors. (Under Button Settings)

The color, weight and size of the text on your buttons is found under Text Settings.

Buttons were created using WebStyle 4 by Xara