Перемещение текста внутри кнопки

Question

есть кнопка. Внутри кнопки текст. Как переместить текст, когда вы нажимаете на 1 пиксель вниз, не двигаясь с самой кнопкой, только текст внутри?

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

1.button-wrapper - служит границей градиента 2.элемент имеет запас в 1 пиксель + градиент фона

Если у меня есть ордера из верхнего отступа, нажатие кнопки увеличивает размер, но мне просто нужно переместить текст внутри тега и, без перемещения кнопки, как?

Answer 1

Возможно, стоит использовать правильную разметку для правильного достижения желаемого эффекта.

<button class="button">
      <span href="#" class="innerButton">
           button text
      </span>
</button>

Затем вы можете использовать этот CSS для перемещения диапазона на 1 пиксель вниз по клику.

.button span
{
    position: relative;
}

/*while pressing*/

.button span:active
{
    top: 1px;
}

http://jsfiddle.net/UuyFe/

Answer 2

Или, альтернативно, для текста в одном элементе кнопки ввода

<input id="submit" type="submit" value="Submit" />

этот CSS может быть полезен:

#submit
{
    padding-top: 4px;
}
#submit:active
{
    padding-top: 6px;
}

Answer 3

У меня была похожая проблема, и я исправил ее следующим образом, хотя я не совсем понимаю, почему float необходим.Будем очень благодарны за любые комментарии по этому поводу.

Я использую padding, чтобы сделать текст движущимся, добавив 1px top + left и вычитая 1px right + bottom.Но по какой-то причине, которую я не понимаю, это само по себе толкает сестринских боксов вниз на 1 пиксель.Мы не хотим, чтобы сами кнопки двигались.

HTML:

<p>
  <span class="button">third</span>
  <span class="button">fourth</span>
</p>

<p>
  <input type="button" class="button button2" value="fifth" />
  <input type="button" class="button button2" value="sixth" />
</p>

CSS:

.button {
  outline: none;
  background-color: blanchedalmond;
  border: 1px solid maroon;
  padding: 3px 10px 4px 10px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  line-height: 20px;
  margin: 0;
}

span.button {
  display: inline-block;
  text-indent: -9999px;
  width: 20px;
  height: 20px;  
}

p {
  background-color: magenta;
  overflow: auto;
}

.button2 {
  float: left;
  margin-right: 4px;
}

.button:active {
  background-color: red;
  border: 1px solid brown;
  padding: 4px 9px 3px 11px;
  margin-top: 0px;
}

Скрипка , где «пятое» и «шестое» ведут себя так, как мы хотим, потому что мы добавили float.