Continuing on from yesterday's tutorial, Error Output With Scriptaculous, in which we got started with a nice little login form showing off simple validation and error output with Scriptaculous, I decided today we would add onto that form a little bit.  One neat thing that you can accomplish in creating your forms in HTML is the use of a custom "submit button". 

By defining your submit button as an image, you can use any image file to replace the standard grey HTML button you see sprinkled all over the web.  In order to do this, you simply change the HTML code you use in your form.

Previously we were using the code:

<input type="submit" value="Login" />

Now obviously, this got the job done but we would like for our site visitors to have a nice themed experience when logging in, so let's style it up!  To do so, simply change the "type" attribute and define a "src" attribute on your input element, leaving your code looking like

<input type="image" src="./images/submit_button.jpg" />

The "src" is the path to the image you want to use.  I decided I wanted to spruce things up a little more and give the submit button some flare, adding a rollover state to it.  In order to do so, I first prepped my image file in Photoshop, leaving me with a two state image:



As you can see, both the on and off states are visible in this image. Why wouldn't I separate them out into individual image files?  Well the answer is, there is no need to with the use of CSS (and afterall, I'd rather only have to worry about loading one image on the client side than two).

How exactly is this accomplished?  Well for starters, we need to simplify the markup for our submit button.  Start by changing the attributes of the "input" element, defining "type","class", and a blank "value":

input type="submit" class="submit" value="" />

Before the CSS is added, we are left with a small non-user friendly button.  By defining the "submit" class that we just attached to our "input" element, we can all at once implement our image as the button.

.submit
{
    background: url(./images/submit_button.jpg) no-repeat;
    height: 42px;
    width: 130px;
    border: none;
}

In this CSS class we are setting the background image, height and width, and stripping the element of its default browser-styled HTML border.  The button is perfectly functional!  However, we still want to add the hover state.  In order to do so, we simply need to define a hover state for the "submit" class.

.submit:hover
 {
     background: url(./images/submit_button.jpg) 0 -42px no-repeat;
 }

In this code, we are leaving all the attributes the same except for the background property, which we are adjusting the background position with a height of -42px.

View Image as a Submit Button with Hover Example

Voila!  There you have some nice little CSS submit button magic.  Note, the hover state will not work in Internet Explorer 6, which does not recognize :hover classes in CSS.  There is an easy way to work around this, which I will uncover in the not so distant future.

Related Posts

This entry was posted on Sunday, January 7th, 2007 at 10:47 pm and is filed under CSS, XHTML.