Question

I have the following snippet of HTML code which displays a button.

<span class="xp-b-submit xp-b-submit-btn xp-b-right">
    <a href="#" class="xp-t-bold" id="PostSubmitLink">Post Search</a>
</span>

In addition to the HTML code, there is the CSS style sheet.

.xp-b-submit-btn {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../../images/new_blue_button.png");
    background-origin: padding-box;
    background-position: -1px 50%;
    background-repeat: no-repeat;
    background-size: auto auto;
}

.xp-b-submit {
    background-position: right -32px;
}

.xp-b-submit, .xp-b-leftSide, .xp-b-submit-large, .xp-b-submit-large .xp-b-leftSide {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/buttonBG.png");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: block;
}

.xp-b-right {
    float: right;
}

The problem that I’m facing is the my button is not long enough. I want to extend it by about 20px but I’m quite new to CSS, and what I’m doing is taking pre-existing code, and modifying it. I’ve been playing around with the attributes in Firebug, but I have no idea where to start, what tabs are responsible for affecting what elements, etc.

Answer 1

Ok, here are a couple of options:

This changes the padding, adding 10px on each side, giving you something closer to the desired width. Presumably the padding is not already at 0, so it’s not exactly 10px additional on each side. You can adjust to your liking. (Think of padding as the distance between your content/text and the edge of the container, which in this case is the button)

padding-left: 10px; padding-right: 10px;

This sets the exact width of the element (again, in this case that would be the button). Adjust the 500px value to match your needs.

width: 500px;