kmcm

Web Development with PHP, HTML, CSS, & JavaScript

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:


#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.

Filed under: