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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:26:45  来源:igfitidea点击:

How to create a text only button?

htmlcssbutton

提问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 buttonelement:

假设您从一个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:pointeror some :hoverrules.

当然,无法判断生成的文本实际上是一个按钮。我想你可以加入一个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;
}