We can’t change history, but we can change the future.
Be nice to each other.
@robertnyman

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:

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:

After Guilherme’s excellent link suggestion, this code has been completely revised/rewritten, so it is now valid and works in all major web browsers (IE 6+, Firefox, Safari, Opera). The only downside is a small bug in Firefox, where it will gain a couple of extra pixels of padding to the right, but only a trained eye will see that.

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.

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.

22 Comments

Personally I like the button element because it detaches a bit the button from a generic <input> element (after all, there is a world of difference between a "hidden", a "button", a "text" and many other elements ;)). I like to be able to semantically distinguish them in their nature.

Further, I like the fact that the button has content, this makes a lot of sense to me. You have a button that does something when clicked, and it can have content of its own… well, almost, since the implementations are not all that flexible and it is hard to style it, but is hard to style <input> elements either, so I like buttons that are <button>.

Now, it seems there is a solution with the span inside of the button element which is presented by FilamentGroup.com.

Personally, I am not much for styling form elements, but prefer to leave that up to the browser. But, for those situations, where you have to style them, it’s great to have another tool in the toolbox.

I do like the <code>button</code> element, as long as I can control it. 🙂

Thanks for the link, it was great inpsiration! I analyzed it, and revised/rewrote my code to have the <code>span</code> element within the <code>button</code>, and ironed out a bug they seemd to have with IE.

I agree with you that is horrible not being able to control elements, but still I like the semantic meaning of the tag. I wish other input elements could have a tag for themselves like <button> and <textarea>.

If I was to hate tags based on control I couldn't support HTML at all until [guess-who] version 6 and previous were dead and buried (and possible further versions as well) 🙂

Hey i thought you guys might like this soup of buttons. I’ve been working on this for a while now, and up to now, no one has reported any new bugs. I think it’s ready for a stable release… Let me know what you think…