Flexible Width Text Link as Buttons with Background Image (SOLVED)

The important part to note in the CSS below is the right margin on the <a> link tag - it's -20px. That beings in the right side so the :hover's work correctly.

When that is done another way the mouse over on one of the ends doesn't work and you get the background image shifting correctly on the end but not under the text. This way makes the link tag cover the entire span tag so both are always triggered on the native :hover state.


THE HTML:

<div class="button-container">
    <span class="button-wrapper">
        <a href="/fr/snapdragon-mobile-processor">Start</a>
    </span>
</div>

THE CSS:

#block-views-training-module-listing-block-2 .views-field-nid .field-content {
    background: url("images/trainmod-start-blank-wide-sprite.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: left;
    height: 30px;
    position: relative;
    /*width: 82px;*/
}
#block-views-training-module-listing-block-2 .views-field-nid a {
    background: url("images/trainmod-start-blank-wide-sprite.png") no-repeat scroll 100% 0 transparent;
    color: #666666;
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
    margin: 0 -20px 0 0;
    padding: 0 30px 0 15px;
    position: relative;
    text-decoration: none;
    /*width: 82px;*/
}
#block-views-training-module-listing-block-2 .views-field-nid .field-content:hover {
    background-position: 0 100%;
}
#block-views-training-module-listing-block-2 .views-field-nid a:hover {
    background-position: 100% 100%;
}

THE BACKGROUND IMAGE: