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

но я получаю только этот результат:

Это спрайт

Скрипка здесь

Источник

2 ответа

Решение

Ваш .ui-button класс удаляет фон (background: 0).

Лучше сначала заставить кнопку работать без класса кнопки пользовательского интерфейса, а затем по правилу заполнить класс кнопки пользовательского интерфейса. Таким образом, вы уверены, что используете минимальный и правильный CSS.

Источник

Я сделал правку и удалил весь ненужный код. Если вы хотите, чтобы текст располагался по центру, отредактируйте padding-left и добавьте выравнивание текста:center

padding-left

и изменить его на

 text-align:center

http://jsfiddle.net/va854

Источник
Другие вопросы по тегам