I'm currently working on a Sprite project, but I've hit a roadblock and can't seem to find a solution.
Check out the code snippet here
Here is the HTML for a simple button:
<a href="#" class="ui-button sub-beta-button">
<span class="button-content">Sign Up for Beta</span>
</a>
and its corresponding CSS styles:
.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;
}
However, despite this setup, I'm only seeing a partial result. It seems like something is not quite right.
This is what the Sprite should look like: