移动按钮内的文本

Question

有一个按钮.在按钮文本内.单击1 px时如何移动文本,不用按钮本身移动,只有文本在里面？

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

1.button-wrapper - 用作渐变边框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/