移動文本按鈕

裏面有一個按鈕。在按鈕文本中。如何在單擊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

移動文本按鈕

回答

相關問題