Ezzy Enough - Random thoughts of an average mind

Several solutions for applying a custom image to a ‘RESET’ button already exist, but there is better (and easier) way to do it I believe, without Javascript and only a few lines of CSS.

UPDATE: “text-indent” doesn’t seem to work in IE. Check the updated code below.

Button Image:
Dimensions: 62 x 22 pixels

HTML Markup:

1

<input class="reset_button" type="reset" value="" />

CSS:

1
2
3
4
5

.reset_button {background:url(../img/reset_button.gif) no-repeat; /* Define Image Path */border:0;width:62px; /* Define Image Width */
 
height:22px; /* Define Image Height */
 
}

Now, lets see it in action:

Hope it helps!

This entry was posted on Sunday, October 7th, 2007 at 2:24 am
It is filed under CSS, Design, How-To.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.