« Back!
Home/End KeyFixer for Firefox 3 »

Custom Image for Reset button, without Javascript

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:
Reset Button 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.

4 Responses to “ Custom Image for Reset button, without Javascript ”

  1. Lovely!

    Many thanks for this, Ebrahim.

  2. thanks…. this code is so useful…it work well in IE, Firefox and Safari….

  3. Very helpful, thank you!

  4. wow! great. Very helpful. Thak u…

Leave a Reply

Anti-Spam Image