如何创建纯文本按钮？答案

【问题标题】：How to create a text only button?如何创建纯文本按钮？
【发布时间】：2011-05-05 17:21:23
【问题描述】：

如何创建一个只显示文本的按钮。类似于超链接，但它必须保留<button> 属性。

【问题讨论】：

【解决方案1】：

假设您从 button 元素开始：

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

您所要做的就是去掉所有默认的 CSS 样式：

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

当然，无法判断生成的文本实际上是一个按钮。我想你可以加入 cursor:pointer 或一些 :hover 规则。

也许你正在制作一个复活节彩蛋，也许你不想希望人们知道它可以被点击。

【讨论】：

在这种情况下，页面中的所有按钮都是文本，但我只需要其中一些
@Vahan 不，如果你使用一个类（例如astext），那么它只会适用于具有该类的按钮。
@Vahan 否，只有类属性设置为“astext”的按钮才会设置为纯文本。
@Vahan 你有链接吗？我弄乱了 JSFiddle 来让它工作，但我只在 Chrome 中做到了。其他浏览器可能会更挑剔一些。
@sdleihssirhc 哪个链接？我与 mozila 合作。我想成为一个按钮作为文本，因为我有一个表格第一行是表格属性列表：名称等，我想在单击列名时对表格列进行排序，我使用 jsp 进行 osrt

【解决方案2】：

也许您可以查看此JSFiddle code 以了解其工作原理。建议的解决方案效果很好。

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;
}

【讨论】：