Looking for guidance on extending the length of a button in HTML code? Take a look at this snippet:
<span class="xp-b-submit xp-b-submit-btn xp-b-right">
<a href="#" class="xp-t-bold" id="PostSubmitLink">Post Search</a>
</span>
To style this button, we have included CSS code as well:
.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;
}
If you're struggling to extend the length of your button by 20px and need assistance navigating CSS code, don't worry! We can help guide you through making these adjustments. Play around with the attributes using tools like Firebug until you achieve the desired result. Let us know if you need further assistance!