移动按钮内的文本答案

【问题标题】：Moving the text inside the button移动按钮内的文本
【发布时间】：2016-08-06 18:39:26
【问题描述】：

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

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

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

如果我有命令从顶部填充，单击，按钮大小增加，但我只需要在标签内移动文本，而不移动按钮，如何？

【问题讨论】：

能否也提供 CSS 代码？
你能把相关的 CSS/HTML 粘贴到 jsfiddle 中吗？
您想在点击时移动 1px 还是让移动保持不变？
我认为你可以改变 'span' padding-top 或 'a' marrgin-top

标签： html css button

【解决方案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/

【讨论】：

【解决方案2】：

或者，对于单个输入按钮元素中的文本

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

这个 CSS 可能有用：

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

【讨论】：

【解决方案3】：

我遇到了类似的问题，并按如下方式对其进行了修复，但我并不特别明白为什么需要 float。任何有关这方面的 cmets 将不胜感激。

我正在使用padding 来移动文本，方法是在顶部 + 左侧加上 1px，然后在右侧 + 底部减去 1px。但出于某种我不明白的原因，仅此一项将同级框向下推 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;
}

Fiddle 其中“fifth”和“sixth”的行为符合我们的要求，因为我们添加了float。

【讨论】：