CSS按钮精灵

Question

I'm trying to get this Sprite done, but i'm stuck and can't figure out a solution.

FIDDLE HERE

I have a simple button:

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

and the 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;
}

but i'm getting only this result:

That's the Sprite:

FIDDLE HERE

Answer 1

your .ui-button class removes the background ( background: 0 ).

You can better first get the button working without the ui-button class, and then rule by rule fill up the ui-button class. That way you are sure you are using minimal and correct css.

Answer 2

I've made an edit and removed all the junk code. If you want the text to the center, edit padding-left and add text align:center

padding-left

and change it to

 text-align:center

http://jsfiddle.net/va854