CSS submit buttons
25/05/05 @ 04:24
For some time now we have all known about how you can treat a submit button as you would any tag when it comes to styling it with CSS, we can change its background colour, border and font styles using our trusty CSS.
The other day I was coding a project when I thought I would shove a form is – as you do. I also noticed on that it has some very cool form submit buttons on most pages; as shown below:
Woooo I thought, I want one of those, especially because it has a cool hover effect. Funny thing was I couldn’t find anywhere it tells you how to do it.
So here is a nice way to do it, it’s the way it is done on Stylegala – so it must be good.
First off you need to create your button using your best loved image program (Fireworks, Photoshop etc), now because of IE and other great browsers you want to have the “on” and “off” state in the same image, like so:
Great! While you still have the graphics thingy open, create a transparent (or see-through) image the same size as one button.
This is what I like to call “the door wedge” because it will hold the space open where the image is so we can use the button we created before.
Now for the code.
The ”/img/btn.gif” is the transparent button we created in the previous step. You also may be wondering why there is another button wrapped with a “style=display: none;”, well it is that A word again – accessibility; a screen reader or un-styled browser may not see anything as the transparent button will be invisible without CSS styling, so this helps them out.
Once you have done all that you need to do the CSS, which goes something like this:
input.send-btn {
width: 130px;
height: 25px;
background: #333 url(/img/btn-send.gif) no-repeat;
outline: none;
}
input.send-btn:hover {
background: #666 url(/img/btn-send.gif) no-repeat 0 -25px;
}
The 0 -25px; needs to be adjusted to correspond to the size of image you used, experiment if you are having trouble.
Sadly the “on effect” will not be seen in IE, because it uses the unsupported :hover attribute – but it will still be visible as the “off effect”.
Hope that helps some people out, any questions?
Update: An example of this technique can be seen in the contact section.
Art (05/30/2005 12:19 PM) #
Interesting. I think I’ll bookmark this page.(05/30/2005 10:23 PM) #
*bookmarks also*Bryan Veloso (06/01/2005 12:38 AM) #
Great little article thing. Maybe when I actually get to finishing my redesign, I’ll put some time in for the little button too! Thanks Dave!JaX (12/05/2005 04:11 AM) #
Well done! I hope to use this someday.
Viktor (12/14/2005 03:08 PM) #
Its really sad that IE doesnt support this kind of nice features. There is a way around though.
.on {background: url(path);} .off {background: url(path);}Then use onMouseOver=’this.classname=on’ and onMouseOut=’this.classname=off’ . Its a bit more code but it work in most of the browsers.
brikou (01/08/2006 11:20 AM) #
That’s just a great tutorial… I will test it on my website soon. :)
(03/06/2006 09:58 AM) #
This is really a nice example of css buttons, better than using ones with flat background colors and not too impresive fonts.
(03/27/2006 03:49 PM) #
A great tutorial, definitely worth a bookmark! But how do you add such clean text to the graphics? I’ve used Photoshop, PSP X, and Adobe Fireworks and it never appears that clean!? Thanks in advance!
justinr_02 (at) yahoo
Natalie Wood (04/13/2006 08:13 AM) #
I think I have a workaround for the lack of “hover” in IE
wrap the “input” tag line with a “link” tag (ie a href=”#”)
I’m sorry I can’t put the actual code in – I can’t get it to display – if you tell me how I’ll post it
Then add this line to the css:
a:hover input.send-btn
{ background: #666 url(/img/btn-send.gif) no-repeat 0 -25px;}
I am relatively new to css and html – so I’m not sure if this will break in other browsers – I use IE 6
David Longworth (04/13/2006 01:43 PM) #
Natalie, Your idea certainly does seem to work in IE, Firefox & Opera! I hadn’t thought of that. The problem is that instead of treating it as a submit button, it (the browser) thinks it is a link and therefore doesn’t submit the form.
This tutorial is getting on 1 year old and Viktor’s idea of using JavaScript is properly the best way of getting around IE.
Natalie Wood (04/15/2006 07:56 AM) #
Thanks David. Which browser doesn’t the submit work in? It does work as a Submit button in IE.
Mal Wanstall (04/19/2006 04:58 AM) #
Hi Natalie,
I think you’ll find that whilst the markup of your solution is valid, both IE and FF will pick up the anchor to follow as it’s the parent tag. For example:
[form action=”form.html” method=”get”][p]
[a href=”followinglink.html”][input type=”submit” value=”Submit” /][/a]
[/p][/form]
The above follows the link when pressed in FF and IE (on my box anyway). Logically that’s the correct thing to do.
I think the only way out of this would be Javascript used to switch the classes as proposed.
skooter (05/01/2006 12:01 PM) #
but! When you use ‘type=”image”’ my mobil (SE K700i) will show both the image and a button with the value-text…
Tom Taylor (06/14/2006 03:06 PM) #
Nice tutorial, but how can you remove the ‘bevel and emboss’ styling from the submit button, i’ve tried ‘outline:none;’ with no luck.
Tom Taylor
David Longworth (06/14/2006 03:14 PM) #
Hmmm, it may depend on the browser you are using – try ‘border:none;’.
AJ (08/02/2006 10:44 AM) #
Trouble is you cannot update the label of the button or am I missing something? If you had a page you wanted to display in multiple languages your button would be ‘hard coded’ and display the English word thus the developer having to create many instances of the button.
(09/07/2006 09:05 AM) #
“Trouble is you cannot update the label of the button or am I missing something?”
you’re missing something – value=”buttonlabelgoeshere”
Bon (01/26/2007 01:49 AM) #
Hi,
There is a major error in your otherwise good article.
You state that the first submit button, surrounded by a P with “style=display: none” is there to aid accessibility. The three most popular screen readers do not see content that is styled with “style=display: none”, therefore it adds no accessibility benefits at all. Instead of using “style=display: none” you should use a newer technique to only show certain content to screenreaders, such as those discussed here: http://www.webaim.org/techniques/css/invisiblecontent/ .
Clickmedia webdesign (01/27/2007 07:12 PM) #
Good idea & bad browser (IE).
China Landscape (02/07/2007 09:37 AM) #
I dont like IE :-(
Dan Bailey (03/17/2007 11:24 AM) #
Good article, cheers.
(03/17/2007 12:25 PM) #
nice !
(03/17/2007 09:11 PM) #
“the door wedge”, sounds like a generic term for sliding doors of css. Time to give credit where credit is due.
Josh (03/27/2007 04:18 PM) #
Doesn’t work when
in Safari
(03/29/2007 09:21 AM) #
what is the function of id in the HTML file? where is the function using that?
thanks
(04/13/2007 09:15 AM) #
This is a really good article, thank you :-)
Allan (04/24/2007 12:07 PM) #
If you want to support IE6 (or even IE5 and others) – which you probably should given that it has by far the biggest market share… – you can use a little progressive enhancement Javascript to get the same effect.
Jakub (05/06/2007 10:52 PM) #
Nice article! THNX