Styling BUTTONS, and achieving sliding doors with them
As you all know, form elements aren’t that easy to style, especially not consistently. At a first glance, the button element seems like a sure winner, but once you delve into it…
Why style buttons?
There just are some designs where it would look better, as well as give the end user a better experience if the buttons match the rest of the web site. I have full respect for native looking buttons overall, but in some scenarios they just don’t cut it.
What’s button?
I won’t really go into that here, so I recommend reading Push my button.
What’s the gain?
Besides from getting a more consistent design and experience, a button can, basically, have any HTML content; meaning, you can have regular text inside of the button element. For example:
<button type="submit">
<span>Some <strong>text</strong><span>
</button>This means that you can handle a web site which will be in several languages from code, instead of producing image buttons to no end. It also means that you can use a sliding doors approach to create two images to use with all buttons on the site, no matter their width.
These images will also be cached when they are first encountered, which means that the images for all buttons in the web site will be preloaded.
Implementing it
Well, it’s almost as easy…
One needs to consider that some web browsers (yeah, give it a wild guess) applies secret padding, meaning, padding which you can’t remove nor disable. Then you need to consider the workarounds. I’ve put way too many hours into getting this consistent now, and I thought I’d share the solution with you.
According to the W3C validator, this is valid code, but some other HTML validators might give you a warning (not sure why since it consists of two inline elements). One option can be to use div elements instead of span, but then you need to float them to make it work in IE. While not semantically perfect, this works for me:
HTML
<button type="submit">
<span>Search</span>
</button>The span element is there to offer the first image, and wouldn’t work inside of the button because of above-mentioned padding problems.
CSS
/*
Setting general button styles.
Background position can't be set to "top",
because of Firefox behavior.
overflow: visible; is to remove magic padding in IE.
*/
button {
text-align: center;
background: URL(button-end.png) no-repeat right;
border: 0;
margin: 0;
padding: 0 3px 0 0;
overflow: visible;
}
/*
Sets the general styles for the span within the button
content, and the starting image. This image contains the
rounded corners to the left and is as wide as
the widest button might become.
*/
button span {
position: relative;
display: block;
white-space: nowrap;
height: 23px;
color: #fff;
font: bold 11px/23px Arial, Helvetica, sans-serif;
text-transform: uppercase;
background: URL(button-start.png) no-repeat left top;
padding: 0 5px 0 8px;
}Try the demo
Instead of just showing you code, I thought I’d be nice to show the actual code in action as well. Try the Styling BUTTONs demo to see for yourself.
Taking it further
Of course you can then tweak the image and button content to handle possible line breaks, just too large font or whatever. Consider this step 1 in your button conquest.
A word of warning
While this design approach should hold up for you, you need to be aware of a couple of functional bugs present in all available versions of Internet Explorer. Instead of posting its value, the button will actually post its innerHTML when it is submitted.
If there are several button elements in a form it will post the values for all of them, and not just the one that was clicked.
However, if you only have one button in your form, and you don’t need to read the value of the actual button, this is a great approach to spice up your design.
