Expanding Button with Rounded Corners in CSS - Part 2

In part one, we went over making a CSS button with rounded corners. Our button also expanded (stretched) vertically with content, and only used one image for the static and hover states. Now, you wouldn’t know this by the amount of comments on the article, but it has generated a lot of traffic. As such, it seemed fit that I do a part two.

This time around we will follow the same technique with only one minor change: we will make the CSS button expand (or stretch) horizontally rather than vertically. I think many people will find this one more useful on a day-to-day basis. So let’s get to it…

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

No Over Sized Example This Time

To view our example, click here.

There are a couple of changes to the CSS and markup that we should go over. The changes are due to the fact that we are expanding (or stretching) the CSS button horizontally rather than vertically. The first change is to the CSS:

.rounded_button, .rounded_button span {
background:url(rounded_button_2.gif) no-repeat;
}
.rounded_button {
padding: 3px 25px 3px 20px;
background-position: right 0;
position: relative;
}
.rounded_button span {
background-position: left top;
width: 15px;
height: 21px;
position: absolute;
top: 0px;
left: 0px;
display: block;
cursor: pointer;
}
.rounded_button:hover {
background-position: right -23px;
color: #000;
}
.rounded_button:hover span {
background-position: left bottom;
}

Last time around we forced the anchor and the span to display as block elements. We did that so we could define a width and a min-height. The major change here is that we are allowing the anchor to display as an inline element. This way, we simply set some padding and let the content do the rest of the sizing of our rounded button.

The span is still set to display as a block element so it can fulfill its duty as our “end cap” to our rounded corner button. The next change we had to make was to the markup. Since we changed the anchor to display as inline, we now need to force a break after it. This of course is optional depending on how you are using the rounded corner CSS button. All we did for this example was wrap a paragraph tag around it:

<a class="rounded_button" href="#">
Click Here to See Something
</a>

Watch Your Text

This time around we don’t have the same safety from text-resize. And because the button itself is essentially getting its size based on the text size and padding, you will need a new image for buttons with larger text. But this example is just that, an example. It’s a simple way to get started and to help you think of more efficient ways to create CSS buttons with rounded corners.

CSS Button with Rounded Corners Part 3?

I would love to make a part 3. Maybe I could go over how to make more complex buttons with CSS. Or, if you find something you don’t like about the buttons we have made, let me know how we can improve the buttons. I would love to get some feedback and make a button that can better meet your development needs. Thanks for stoppin’ by.