rmlumley.com

There are a few different ways to create styled buttons for a website. One is to create an image for the button, but the problem is you will need to create new images for each button on the site. Another option is to create a background image and overlay the button text over the image. This is a better option, but what if the Button text is too long?

The best option to handle button styles on a website is to use the sliding doors technique. Create two images that will adjust accordingly to the size of the button. This means that the user only needs to load two images and they’ll be able to view every button on your website, regardless of the size of the text.

Search

Add to Shopping Cart

Now, lets go over how to create these buttons using CSS. First, create the images, one for the right side and the other for the left.

As you can see, one is excessively long so that it’s able to stretch depending on the amount of text in the button. Now the html:

<button class="wbButton">
     <span>Search</span>
</button>

Finally, the CSS:

.wbButton, .wbButton:hover {
     border:0;
     cursor:pointer;
     background:url(/demos/button_right.png) no-repeat right;
     padding: 0 25px 0 0;
     text-align: center;
     width: auto;
     overflow: visible;
     margin: 0 0 0 10px;
}

.wbButton span {
     background:url(/demos/button_left.png) no-repeat left;
     position: relative;
     display: block;
     white-space: nowrap;
     padding: 0 0 0 25px;
     height: 25px;
     line-height: 25px;
     font-size: 13px;
}

The background image sets and positions the image, while the padding will adjust the positioning of the two images. When you create your images, you’ll probably need to adjust the line-height, height & padding. This should work in all modern browsers.

Posted in CSS | 8 Comments »

This entry was posted on Sunday, March 8th, 2009 at 11:27 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.