Question

Usually when I create buttons using gradients, or sections and buttons using shadow or rounded edges, I use something like the following CSS format to allow the contained content to be any length:

#button {
    height: 40px;
}

.button_edge_left {
    float: left;
    width: 4px;
    height: 40px;
    background: url(images/button-left_static.png);
}

.button_middle_cont {
    float: left;
    padding: 12px 10px;
    font: bold 16px Arial, Helvetica, sans-serif;
    height: 40px;
    background: url(images/button-middle_dynamic.png);
}

.button_edge_right {
    float: left;
    width: 4px;
    height: 40px;
    background: url(images/button-right_static.png);
}

Above is my CSS where .button_edge_left and .button_edge_right act as either end (left/right) of a button and .button_middle_cont acts as the middle portion which can expand horizontally.

For good measure, html HTML:

<div id="button">
<div class="button_edge_left"></div>
<div class="button_middle_cont">This is a button!</div>
<div class="button_edge_right"></div>
</div>

I’m wondering if there’s anyway to remove the two edge classes, and somehow create an element which brings together all three classes?

Although there’s more overhead, this is a lot easier from an editing point of view then having individual static images for each button on a page.

Answer 1

CSS3 allows for multiple background images to be assigned to a single element.

#button {
    padding: 12px 10px;
    font: bold 16px Arial, Helvetica, sans-serif;
    height: 40px;
    background: url(images/button-left_static.png) left top no-repeat, url(images/button-right_static.png) right top no-repeat, url(images/button-middle_dynamic.png);
}

Again, this solution is only viable for CSS3 compliant browsers (IE >= 9, Opera >= 10.5, Firefox >= 3.6, Chrome/Safari >= 1.3).

These images stack in the order they are written, therefore the first background image will be the more foreground background, and as such you should put your repeating image last.