样式按钮单击文本

Question

当您单击按钮HTML按钮时，按钮会向内移动，从而使按钮内的文本稍微向下移动。我的问题是，如何在点击按钮时停止按钮更改（向内）？

我希望你能理解我的问题。

Answer 1

用边框等完成任何你喜欢的事后，只需在文本周围的按钮内放一个跨度，如下所示：

<button class="button" type="submit"><span class="buttonspan">Blah</span></button>

然后CSS变为：

button {position:relative; width:40px; height:20px /* set whatever width and height */}

buttonspan {
height: 30px;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

确保设置绝对范围和按钮相对..就像魅​​力一样。

Answer 2

大多数跨浏览器友好和简单的答案可能是用图像替换它 - 这将给你最大的控制，因为所有浏览器对待按钮的方式不同..即使你尝试边框：0样式，文本在在某些浏览器中按钮可能仍会向下移动。