Form Button Styling
Form Button Styling
There are many ways to style a form “input” button to replace with an image that has a hover state. I’m sure just like me; you have hunted the internet high & low looking for the best solution that works across all browsers. I have found many different solutions in my hunt, all of these so called solutions have some form of error in an IE browser & you have to find some hack/workaround just for IE.
The Big NO NO
There is a solution that fixes the look but is a big NO NO for the accessibility, which I have come across on a number of occasions. I found that some developers will take out the value of the button (Value=””). I cannot stress enough that this is not a solution It’s a badly thought out hack as this will display fine when the CSS file renders it, Problem is if CSS is turned off (for example if the user is using a screen reader) the button is blank.
This fix works in versions of Firefox (not mine) but not IE, Chrome or Safari it leaves the buttons value displaying over the image. So this solution is out of date now & doesn’t work.
This fix works in Firefox but again like the last solution has errors in IE, Chrome or Safari it displays a dot or a line of dots in the middle of the button over the image. So again this solution is out of date now & doesn’t work.
I was looking over all the options and tried a few things that failed one after another, until I finally came across this method while trying all the different things I could think of.
Style your submit button as you normally would set your:
You now have the button you want apart from that pesky “value” hovering over your image making your lovely bit of design work look terrible.
To hide the value so it will not display on all browsers, you add the following 3 CSS values to your input:
Make this the same value as the height you have set
2. Overflow: hidden
This hides anything outside the height set & the padding push’s the “value” into the hidden area.
Finally you need to add a float, even if you don’t need one. Without the float the padding adds to the height of the button which you can’t remove, without showing the value text again.
There you go a nice easy cross browser compatible form button.
LHM Media, Birmingham, UK
Enjoyed this post?
Please share and spread the love.
Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.
You may also like
The Design Club Feed
- Introducing Cloud Computing and Cloudiro
- Font: Helvetica Neue Ultra Light (iOS 7)
- Most Beautiful Places in the World
- In Depth Look at IOS 7 : Flat Redesign
- Useful Open Source Tools and Scripts for WordPress Developers
- 25 beautiful and inspiring workplaces
- Apple IOS 7 Redesign: The way forward?
- DXThemes: Mother of all Deals