移动文本按钮

里面有一个按钮。在按钮文本中。如何在单击1 px时移动文本，而不是使用按钮本身移动，只移动文本内部？移动文本按钮

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

1.button - 包装 - 作为梯度边界 2.element有1px的保证金+背景梯度

如果我有一个从顶部填充命令，点击，在大小按钮增加，但我只需要在标签内移动文本，而不用移动按钮，怎么样？

来源

2011-12-20 Tavria_forever

你能提供的CSS代码吗？ – sascha 2011-12-20 09:00:26

你可以在jsfiddle中粘贴相关的CSS/HTML吗？ – Edwin 2011-12-20 09:00:56

你想在点击时移动1px还是要让运动持久？ – fcalderan 2011-12-20 09:07:04

它可能使用正确的标记，以正确实现你想要的效果是值得的。

<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/

来源

2011-12-20 09:10:52 Kyle

真棒，谢谢！ – Norbert 2013-03-29 14:37:17

，或者，在一个单一的输入按钮元素的文本

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

这个CSS可能是有用的：

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

来源

2013-04-26 11:52:31

我有一个类似的问题并修正它如下，虽然我不明白为什么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。

来源

2016-08-06 10:39:26 WoodrowShigeru

移动文本按钮

回答

相关问题