I'm currently on parental leave till September 1st. Until then, I will not be available to read comments, e-mails, tweets and Facebook messages.

If you are interested in my writings, please subscribe to my RSS feed and follow me on Twitter.

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:

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.

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.

21 Comments/Reactions

Write a comment

Twitter reactions

Share your thoughts:

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . If you want to display code examples, please remember to write &lt; for < and &gt; for >.

Comment preview