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

Question

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

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

1.button-обертка - Служит градиентную границей 2.element имеет запас 1px + фон градиент

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

Answer 1

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

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

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

.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 верх + левый и вычитая 1px справа + снизу. Но по какой-то причине я не понимаю, это один толкает боксерские боксы на 1px. Однако мы не хотим, чтобы кнопки сами двигались.

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

Fiddle где "пятой" и "шестой" ведут себя, как мы хотим, чтобы они, потому что мы добавили float.