Recent Posts
- (09/10) Fixing Warning: the ECDSA host key for 'github.com' differs from the key for the IP addressTAGS:Web Server Admin
- (12/26) CakePHP 3 - Getting List of Column Definitions from a Table (like schema())TAGS:CakephpCake3
- (09/14) Change Order of Loaded Behaviors in CakePHP 3TAGS:Cake3CakephpWeb ProgrammingPhp
- (05/29) CakePHP 3 - Accept JSON Header Only Working When Debug FalseTAGS:Web ProgrammingCakephpCake3
- (05/23) Remove All Events from Google Calendar (Reset Calendar)TAGS:Web ProgrammingPhp
- (11/08) Google Tag Manager (GTM) Not Firing Default PageView EventTAGS:Web ProgrammingJavascriptGoogle Tag Manager
- (10/13) In PHP, how do you get __toString() Magic Method Result without calling echo?TAGS:CakephpCake3Cakephp 13PhpWeb Programming
- (11/14) Getting output from shell_exec() at all timesTAGS:Web ProgrammingWeb Server Admin
Subscribe to my feed
MainelyDesign.com Blog
Best CSS Method for Using Image as Submit Button
Posted on 02/03/2010 at 12:17 pm by Kevin Wentworth
Viewed 21,601 times | 2 comments
I came across an interesting issue with web forms and CSS. Surprisingly, the end result is much better than I expected. I knew that using an image instead of a traditional form submit button (<input type="submit">; instead of <input type="image"> or <input type="button">) would be a little challenging. I like a challenge, plus I wanted to use the submit button because it's the standard approach to forms and I remember reading somewhere that input's of type image or button do not submit when you press enter...a usability faux paus in my opionion.
CSS to Make an Image Act Like a Submit Button
Just a little bit of redundant CSS coding (not a hack, I swear) and you are on your way to using a background image instead of a traditional input submit button. Working CSS code:
- div.submit input {
- background-image: url(../img/template/express-form-go.gif);
- background-repeat: no-repeat;
- color: transparent;
- border: 0;
- text-indent: -1000px;
- display: block;
- font-size: 0px;
- line-height: 0px;
- width: 98px;
- height: 42px;
- overflow: hidden;
- cursor: pointer;
- cursor: hand; /* for IE 5.x */
- }
How does it work? Background-Image for a Submit Button Explained:
- First thing you do is hide the "Submit" button text by using a negative text-indent. (You can also use padding but that has a hack involved)
- This works for the modern browsers, except IE. (are you surprised?)
- To get IE to play nice, you make it display as a block, then text-indent will work.
- For good measure, you should also set the font-size to 0 and the line-height to 0. (Thanks to ProductiveDreams.com)
- And to be certain, I defined the width and height of the image, set overflow to hidden and made the font color transparent.
- For usability, I made the hand cursor appear, just so customers would know to click on the button.
Cross-Browser Support
This works pretty well across the major browsers. Nothing too tricky, no hacks. The only browser I've found that it didn't work on (the "Submit" text was still displayed, but really small) was Opera 9.1. Now, that browser is from 2006. It's kind of a fluke that I even have that browser working on a computer. Plus, it worked perfectly on the latest Opera mini browser. With that caveat, this is a cross-browser compatible method for using an image as a submit button (instead of those pesky inputs of type image).
Cheers,
-Kevin Wentworth
Tags for Best CSS Method for Using Image as Submit Button
Css | Example | Ie | Internet Explorer | Tutorial | Web Design | Usability | Hack
Comments for this Posting
Sorry, comments are closed for this posting.
Please Email Kevin if you have any questions. Thanks!
Posted by manish k
on 26/3/10
Hey its works like WOW,
Searched on number of blogs , you mentioned solution very clearly.
Surprised to see that this will be first the first comment.