Expanding Button with Rounded Corners in CSS

I’m a big fan of using background images effectively AND efficiently. I emphasize AND because you could argue a background image is effective if it looks correct, despite the fact that you could have also made it more efficient. Such as cutting a vertical gradient and applying a ‘repeat-x’ to it. This sounds like common sense to a lot of us, and it should be. But what else could we be doing with these background images?

Go to “Expanding Button with Rounded Corners in CSS” Part 2

Rounded Buttons

Doing a rounded button with CSS is pretty fun and easy using background images. Even the hover state is a cinch. There are plenty of examples on the internet about many ways to accomplish this goal. But what are some possible downlfalls of a lot of these buttons? Here are a couple of common cons:

• What happens if you need more text in the button? Or if that text doesn’t fit, and needs to break to the next line?
• What about when the user resizes text size?

In both cases we often find that our buttons, which were made with a specific size, have text that just falls all over the place. Or, in the case of our overflow happy friends, the text gets clipped. Let’s try to remedy these possible downfalls.

About the Example

The example I will be showing you is by no means new or ground-breaking. But the technique involved is often overlooked or under-used. We again remember the discussion about effective vs. efficient. By making a rounded button that can expand with content, like the one used in this case, developers will often use multiple images. This can lead to concerns about efficiency because of the file size. Well, we will try to find a good medium. Now let me just say, just like a lot of things in web development, this is not the only way to make a button. But I think you will like it. Let’s get on with it.

Our Extremely Over-sized Button

To view our test case, click here.

I know its large, but I figured what the hey, it is only one example. Feel free to re-size the text while viewing. On with the code dissection…

<a class="rounded_button" href="#">
	BUTTON HERE
	<span></span>
</a>

Yep, that’s it. Pretty simple, eh? The span will be used for the ‘bottom’ of our rounded button. Feel free to add a class to the span tag. I find that I often don’t have to. And now the CSS.

.rounded_button, .rounded_button span {
	background:url(rounded_button.jpg) no-repeat;
	display:block;}
.rounded_button {
	width:122px;
	min-height:21px;
	padding:39px 72px 38px 72px;
	background-position:top left;
	position:relative;}
.rounded_button span {
	background-position:left bottom;
	width:266px;
	height:18px;
	position:absolute;
	bottom:0;
	left:0
}
.rounded_button:hover {
	background-position:top right;}
.rounded_button:hover span {
	background-position:bottom right;}

And, of course, some IE compensation…

<!--[if lte IE 6]>
	<style>
		body {
			font-size:62.5%;
		}
		.rounded_button {
			font-size:1.7em;		}
			.rounded_button span {
			bottom:-1px;		}
	</style>
<![endif]-->

Now, I know most of this is common sense. So I’ll be brief. The cool thing here is that there is one background image. So, in most browsers (notice the emphasis on most), when the text is resized, the button will expand to hold the content. We are using padding to ensure that our text looks good in the middle of our gigantic button. Other than that we are simply moving the background position around like crazy. Like I said before, simple example. And in most ‘real world’ cases, this is pretty effective AND efficient.