Free Buttons Sets
Hover Color Change Effect

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

HTML

CSS

<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