html - 移动按钮内的文本

Question

有一个按钮。在按钮文本内。如何在单击向下 1 px 时移动文本，而不是随按钮本身一起移动，仅移动其中的文本？

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

1.button-wrapper - 充当渐变边框2.element有1px margin + background-gradient

如果我有来自顶部填充、点击、按钮尺寸增加的命令，但我只需要在标签内移动文本，而不移动按钮，怎么做？

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/