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/

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。但由于某种原因，我不明白，仅此一个将兄弟框推下来 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。

移动按钮内的文本

3 个答案: