Replace a form submit button with an image using just CSS

There are tons of articles out there on the subject of styling forms with individual web designers developing their own particular coding preferences over time.

For developers and designers, creating and styling forms is the bread'n'butter of their trade and one of their most regular activities.

Some parts of the form such as checkboxes and file uploads can only be partially altered by CSS with these form elements being reliant on the inbuilt OS and browser style, but the submit button can be radically altered. It can even be totally replaced with an image like so:

Image submit button:
<input type=”image” src=”button.png” alt=”submit” name=”submit” />

Normal submit button:
<input type=”submit” name=”submit” value=”submit” />

As creating an image button is so straight forward it may seem pointless to use another method; however, there are a number of problems with HTML image buttons.

Firstly, there are issues with PHP form submission because it follows the mouse coordinates and creates two different values based on the X and Y coordinates instead of just one straight submission.

Secondly, you may be using a CMS and it may be not immediately obvious just how to alter an HTML form.

This is a foolproof way of using an CSS to replace a form submit button with an image and which works in any browser and platform.

The first part of the code uses CSS3 attribute selectors and places an image as a background for the element (use an alternative selector method for Internet Explorer). Make sure the background image isn't repeated and is centred on both axis'. The width and height must be the same as the image.

Now make sure that there is no border and the text has a transparent colour so that it is invisible.

form input[type=submit] {
	background : url("submit.png") no-repeat center center;
	width : 115px;
	height :52px;
	border : none;
	color : transparent;
}

One problem though is that Internet Explorer below version 8 doesn't recognise transparent as a valid value so for the legacy browsers we'll give the font a size of zero.

form input[type=submit] {
	background : url("submit.png") no-repeat center center;
	width : 115px;
	height :52px;
	border : none;
	color : transparent;
	font-size : 0
}

It's easy to change the image on the hover state:

form input[type=submit]:hover {
	background : url("submit-hover.png") no-repeat center center;
}

Screen readers will still be able to read the submit button text despite it being invisible to other web users.

These are a couple of examples from recent jobs that I have done:

Using sliding doors for submit buttons

It is also possible to use the sliding doors technique for submit buttons. For those that don't know, sliding doors is a means of creating a dynamic background image that expands as the text increases. It is most commonly used on menu list items.

Here's the image. A left hand side and a right hand side:

The HTML submit button is as before but this time we will encase it in a div like so:

<div class=”outer-submit”>
<input type=”submit” name=”submit” value=”submit” />
</div>

And here is the CSS code:

form .outer-submit {
	margin : 0 auto;
	background:transparent url("images/topic_button.png") no-repeat top left;
	max-width : 240px;
	width : 50%;
	padding : 0 0 10px 0;
}
form input[type=submit] {
	color : #fff;
	padding:9px;
	margin:0px 0px 5px 3px;
	border : none;
	width : 100%;
	background:transparent url("images/topic_button.png") no-repeat top right;
}
form .outer-submit:hover {
	background:transparent url("images/topic_button_hover.png") no-repeat top left;
}
form input[type=submit]:hover {
	background:transparent url("images/topic_button_hover.png") no-repeat top right;
}

This is what the above code looks like on a website.