Antonio Wells. Web & Multimedia Designer

This tip focuses on using CSS to replace the background images on INPUT button types. Take a look at the button for my Comment Box, it has plain text over a custom background image controlled by CSS. Below is a breakdown of the code:

Download the Complete Source Files. CSS Tip: CSS Image Buttons

1. Create the button image:

2. Our HTML for the Button:

<form id="form1" method="post" action="">
<fieldset>
<legend>CSS Buttons</legend>
<br />
<input type="button" class="ButtonBlue" value="Submit" />
</fieldset>
</form>

3. Our CSS:

Set the graphic button Width & Height

.ButtonBlue {
        width: 150px;
        height: 50px;
}

Add the Background image reference, we don’t want it to repeat if overflown, as well as give it White text color

.ButtonBlue {
        width: 150px;
        height: 50px;
        background: url(../images/btn_blue.gif) no-repeat top left;
        color: #FFFFFF;
}

Finally, important to remove the border, without it, makes for an ugly rectangluar bordered button. Set the Font Size relavant to default size in “body” tag, and make it Bold.

.ButtonBlue {
        width: 150px;
        height: 50px;
        background: url(../images/btn_blue.gif) no-repeat top left;
        color: #FFFFFF;
        border: 0px;
        font-size: 1.6em;
        font-weight: bold;
}

Enjoy!