如何创建纯文本按钮？

Question

如何创建一个仅显示文本的按钮。与 超链接 类似，但它必须保留

<button>

属性。

Answer 1

假设您从

button

元素开始：

<button class="astext">hello, world</button>

您所要做的就是删除所有默认的 CSS 样式：

.astext {
    background:none;
    border:none;
    margin:0;
    padding:0;
    cursor: pointer;
}

当然，无法判断生成的文本实际上是一个按钮。我想你可以加入

cursor:pointer

或一些

:hover

规则。

也许您正在制作复活节彩蛋，也许您不想让人们知道它可以被点击。

Answer 2

也许你可以检查这个 JSFiddle 代码 看看它是如何工作的。建议的解决方案效果惊人。

HTML

<button class = "asText" id = "doSmth"> Hello World </button>
<div id="hiddenText">i'm well hidden</div>

CSS

.asText {
background:none;
border:none;
margin:0;
padding:0;
}