Styling submit buttons with images

Wednesday 26th August 2009

There are a number of ways to create fancy looking Submit buttons, whether using html or css. Some people use javascript to send a form, using a style link button as the submit, while others use the button input type. Here’s how I would create an accessible and user friendly submit button:


HTML:
<input id="input_submit" name="input_submit" type="submit" value="Submit" />

CSS:
#input_submit {
   /*These 3 properties are to reset the default button styling*/
   margin:0px;
   padding:0px;
   border:0px;

   width:244px;
   height:55px;

   /*Set the colour to the background of the button, 
   and set the font size to 0 so it won’t display*/
   color:# 5d5d5d;
   text-align:right;
   font-size:0px;
 
   /*This sets the background to the specified image*/
   background: # 5d5d5d url(side-submit-bg.jpg) 0px 0px no-repeat;
 
   cursor:pointer;
}

Here’s how it looks:
Fancy Send Now button

And with CSS turned off:
Plain Submit button

To give the button a hover effect, simply make the following changes:

  • Create a hover state and add it to the image.
  • On hover and focus, change the background-position of the image, and color if necessary.

#input_submit :hover, #input #submit:focus {
   background-position: 0px -55px;
   color: # 312d2c;
}

Here is a live example.

Unfortunately the hover/focus state doesn’t work in IE6, since the browser only implements hover states on <a> tags, but it works well otherwise, and can be improved upon with a bit of unobtrusive javascript.

Posted by Kevin McMahon @ 09:43 PM

Filed under:

Add a comment