This setup is not valid for StoreFronts.

Altering the appearance of the Yes No buttons

You may use css to alter the appearance of the Yes No buttons.
The buttons are outputted within the following html block (which is subject to change; test your screens!)

<table class="ucUpsellButtonTable">
          <tbody><tr>
            <td>
              <div id="ucUpsellYesButtonId" class="ucUpsellYesButton">
                <input border="0" type="image" class="ucUpsellYesButtonOverlay" alt="Yes" src="/checkout/images/spacer.gif" name="yes">
              </div>
            </td>
            <td>
              <div id="ucUpsellNoButtonId" class="ucUpsellNoButton">
                <input border="0" type="image" class="ucUpsellNoButtonOverlay" alt="No" src="/checkout/images/spacer.gif" name="no">
              </div>
            </td>
          </tr>
        </tbody></table>

The buttons are input images pointing to spacers. They are surrounded by <div> blocks that use a background image to show the actual button. This allows for maximum browser compatibility.

Button	Attribute	CSS Class Name
Yes	background image	ucUpsellYesButton
Yes	size (height and width)	ucUpsellYesButton and ucUpsellYesButtonOverlay
No	background image	ucUpsellNoButton
No	size (height and width)	ucUpsellNoButton and ucUpsellNoButtonOverlay

Here's an example you could add to a style tag with the <before> section, placed in between opening and closing (<head> ...button code here... </head>) head tags as the first part of the of the HTML section of the upsell offer editor:

.ucUpsellNoButton {
background-image: url(https://www.mysite.com/reallycoolbuttons/no.gif);
background-repeat: no-repeat;
height: 45px;
width: 82px;
}
.ucUpsellNoButtonOverlay {
height: 45px;
width: 82px;
}
.ucUpsellYesButton {
background-image: url(https://www.mysite.com/reallycoolbuttons/yes.gif);
background-repeat: no-repeat;
height: 45px;
width: 82px;
}
.ucUpsellYesButtonOverlay {
height: 45px;
width: 82px;}

Swapping the order of the Yes No button

Some merchants wish to make the No button appears before the Yes button on a page. This requires additional html code, but can be achieved.
First, hide the default buttons.

.ucUpsellButtonTable { display:none; }

In the footer section of your upsell html, add the following, styling them as you see fit.:

<table>
    <tr>
        <td>
            <img src="/checkout/images/upsellNo.gif" onclick="ucSelectNo()" style="cursor:pointer">
        </td>
        <td>
            <img src="/checkout/images/upsellYes.gif" onclick="ucSelectYes()" style="cursor:pointer">
        </td>
    </tr>
</table>

This will display the two buttons, with the No button first. The onclick events will handle the form submission.

UltraCart Documentation

Customize the Yes No buttons on an Upsell After screen

Altering the appearance of the Yes No buttons

Swapping the order of the Yes No button

Related Documention