Expanding Button

HTML

<a class="action-button" href="#"><span>Some text</span></a>

CSS

body {padding: 30px;}

a.action-button {
    background: transparent url(http://dl.getdropbox.com/u/228089/action-button-right.png) no-repeat scroll top right;
    color: black;
    cursor: pointer;
    display: block;
    float: left;
    font: bold 11px Verdana,Helvetica,sans-serif;
    height: 27px;
    margin: 0;
    padding: 0 28px 0 0;
    text-decoration: none;
    }

a.action-button span {
    background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left.png) no-repeat;
    color: #ba176f;
    display: block;
    font: Tahoma, Helvetica, sans-serif;
    height: 19px;
    line-height: 14px;
    margin-right: -8px;
    padding: 8px 12px 0px 20px;
    }
    
a.action-button:hover {
    background: transparent url(http://dl.getdropbox.com/u/228089/action-button-right-hover.png) no-repeat scroll top right;
    color: white;
    }

a.action-button span:hover {
    background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left-hover.png) no-repeat;
        color: white;

    }