Html 如何创建纯文本按钮?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5901732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a text only button?
提问by Vahan
How can I create a button that only shows the text. Similar to an hyperlinkbut it has to keep the <button>
properties.
如何创建仅显示文本的按钮。类似于超链接,但它必须保留<button>
属性。
回答by sdleihssirhc
Assuming you're starting with a button
element:
假设您从一个button
元素开始:
<button class="astext">hello, world</button>
All you have to do is take away all of the default CSS styling:
你所要做的就是去掉所有默认的 CSS 样式:
.astext {
background:none;
border:none;
margin:0;
padding:0;
cursor: pointer;
}
Of course, there's no way to tell that the resulting text is actually a button. I suppose you could throw in a cursor:pointer
or some :hover
rules.
当然,无法判断生成的文本实际上是一个按钮。我想你可以加入一个cursor:pointer
或一些:hover
规则。
Maybe you're making an easter egg, maybe you don't wantpeople to know it can be clicked.
也许你正在制作一个复活节彩蛋,也许你不想让人们知道它可以被点击。
回答by Ryuhinata
Maybe you can check this JSFiddle codeto see how it works. The suggested solution works wonder.
也许您可以检查此JSFiddle 代码以了解它是如何工作的。建议的解决方案令人惊奇。
Html
html
<button class = "asText" id = "doSmth"> Hello World </button>
<div id="hiddenText">i'm well hidden</div>
CSS
CSS
.asText {
background:none;
border:none;
margin:0;
padding:0;
}