suburban glory

A Blog in Suburban Glory:
Web Dev Ideas and Inspiration

Replace a form submit button with an image using just CSS

|| Category: 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:

Submit button example onesubmit button example two

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:

sliding doors images

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.

sliding doors submit button

Comments

Anonymous || Tue 19th Jul 2011

Woot! This works perfectly for all the browsers I care about. The only suggestion I have is to add a cursor style. Thank you!

Bov || Wed 8th Feb 2012

It took me over an hour and a half to find a solution to replacing form buttons with images WITHOUT causing havoc and wreckage on my website :D and finally I have found it in your article. You are AWESOME.

Andy W || Sat 18th Feb 2012

Glad you could use the info! Spread the knowledge

Anonymous || Fri 16th Mar 2012

Thanks for the excellent article. i have a form submit button w/ image like you; however, i have to click exactly on the letters "SUBMIT" for the button to work. Any ideas greatly appreciated!

Charlie || Sun 18th Mar 2012

It's great! But I can't figure out how to have two buttons with different linking target on the same page. The "form input[type=submit]" property is the problem. It uses for all buttons on the form. Thanks.

Princess || Wed 21st Mar 2012

My searching was coming up with all the wrong ways to do this and I knew there had to be an easier way to get it done so thanks so much! Now I can focus on the bigger hurdles of my webpage. Thanks again!

Andy Walpole || Thu 22nd Mar 2012

Charlie,

If this is the case then just expand on the CSS selector list.

For instance to make changes to the submit button on this comment form alone you could write something like this:

#comments-form input[type=submit] {

// do something here

}

Debbie || Thu 22nd Mar 2012

You just made my day! That was a great help! Thanks!

Joe || Thu 5th Jul 2012

I wanted to thank you for taking the time to write this. The CSS you provided was a perfect fit for the issue I faced. No javascript, faster download times, everything is better thanks to your help. I just wanted you to know you helped and to say thank you.

Joe

Ryan || Tue 10th Jul 2012

Thanks for the tips! Really hard to find this information on the web! I had thought about using transparent in css declaration but i was doing it like a hexidecimal value (#transparent) so no wonder it wasn't working! By the way, it isn't completely foolproof in IE7, it still displays to small dashes in the middle of my search button/image. Any suggestions for getting rid of that??

Andy || Sun 15th Jul 2012

To tell you truth it's been a while since I used this technique. Are you sure the image you used is big enough and with no transparency?

Martin || Tue 4th Dec 2012

Hi great tutorial accept im a little stumped when it comes to creating the text in the submit button. Do I put this in the value=\"\" or incorporate it in the button image or something else?

Dmitry Pavlov || Wed 26th Dec 2012

Very clear explanation about why CSS should be such. Thanks, Andy!

Andy || Fri 28th Dec 2012

Martin, In the tutorial above you create the text in the image.

To be honest, it's a little dated now and I would favour creating CSS only buttons these days rather than using images so that it looks crisp on high-DPI devices

Justina || Wed 20th Feb 2013

This is AWESOME! I am in a web design class using Dreamweaver and at first we were like, is this for real? And then when it worked I threw my hands up in the air like we got a touchdown!!! Thanks for putting this on your blog!!!

You can add comments below.
Auto-paragraphing is enabled. Double newlines will be converted to paragraphs.

Allowed tags: a, abbr, acronym, b, blockquote, caption, cite, code, dd, del, dfn, div, dl, dt, em, i, ins, kbd, li, ol, p, pre, s, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

If you wish add code examples then please do so between the following tags:

<pre><![CDATA[
Place code here
]]></pre>







mainland