Css按钮精灵

我试图让这个Sprite完成，但我卡住了，无法找出解决方案。Css按钮精灵

我有一个简单的按钮：

<a href="#" class="ui-button sub-beta-button"> 
    <span class="button-content">Beta Sign-Up</span> 
</a>

和CSS：

.sub-beta-button { 
    height: 78px; 
    background: transparent url("http://i.imgur.com/PSpIGLA.png") 100% -160px no-repeat; 
    padding-right: 50px; 
    margin-left: 30px; 
    bottom: 18px; 
    z-index: 1; 
    position: relative; 
} 

.ui-button { 
    background: 0; 
    border: 0; 
    cursor: pointer; 
    display: inline-block; 
    height: auto; 
    overflow: visible; 
    padding: 0; 
    margin: 0; 
    vertical-align: middle; 
    outline: 0; 
    text-align: center; 
    white-space: nowrap; 
    cursor: pointer; 
} 
.sub-beta-button .button-content { 
    background-image: url("http://i.imgur.com/PSpIGLA.png"); 
    padding-left: 50px; 
    color: #fff; 
    font: normal normal 18px/86px "Bliz Quadrata", Times New Roman; 
    text-transform: uppercase; 
    text-shadow: 0 0 4px #000, 0 0 8px #000; 
    overflow: hidden; 
    min-width: 110px; 
    margin-left: -30px; 
    height: 76px; 
    z-index: 2; 
} 
.ui-button span { 
    outline: 0; 
    display: inline-block; 
    background-repeat: no-repeat; 
}

但我只得到了这样的结果：

enter image description here