CSS 如何使 html 链接看起来像一个按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/710089/
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 do I make an html link look like a button?
提问by MatthewMartin
I'm using ASP.NET, some of my buttons just do redirects. I'd rather they were ordinary links, but I don't want my users to notice much difference in the appearance. I considered images wrapped by anchors, i.e. tags, but I don't want to have to fire up an image editor every time I change the text on a button.
我正在使用 ASP.NET，我的一些按钮只是做重定向。我宁愿它们是普通的链接，但我不希望我的用户注意到外观上的太大差异。我考虑过由锚点包裹的图像，即标签，但我不想每次更改按钮上的文本时都必须启动图像编辑器。
回答by TStamper
Apply this class to it
应用这个类
.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}<a href="#" class="button">Example</a>回答by guanome
Why not just wrap an anchor tag around a button element.
为什么不将锚标记包裹在按钮元素周围。
<a href="somepage.html"><button type="button">Text of Some Page</button></a>
This will work for IE9+, Chrome, Safari, Firefox, and probably Opera.
这将适用于 IE9+、Chrome、Safari、Firefox 和 Opera。
回答by Raul Luna
IMHO, there is a better and more elegant solution. If your link is this:
恕我直言，有一个更好更优雅的解决方案。如果你的链接是这样的：
<a href="http://www.example.com">Click me!!!</a>
The corresponding button should be this:
对应的按钮应该是这样的：
<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>
This approach is simpler because it uses simple html elements, so it will work in all the browserswithout changing anything. Moreover, if you have styles for your buttons, this solution will apply the same styles to your new button for free.
这种方法更简单，因为它使用简单的 html 元素，因此它可以在所有浏览器中运行而无需更改任何内容。此外，如果您的按钮有样式，此解决方案将免费将相同的样式应用到您的新按钮。
回答by Kevin Leary
The CSS3 appearanceproperty provides a simple way to style any element (including an anchor) with a browser's built-in <button>styles:
CSS3appearance属性提供了一种使用浏览器内置样式设置任何元素（包括锚点）样式的简单方法<button>：
a.btn {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}<body>
<a class="btn">CSS Button</a>
</body>CSS Trickshas a nice outline with more details on this. Keep in mind that no version of Internet Explorer currently supports this according to caniuse.com.
CSS Tricks有一个很好的大纲，里面有更多的细节。请记住，根据 caniuse.com，目前没有任何版本的 Internet Explorer 支持此功能。
回答by ólafur Waage
a {
display: block;
height: 20px;
width: auto;
border: 1px solid #000;
}
You can play with <a>tags like this if you give them a block display. You can adjust the border to give a shade like effect and the background color for that button feel :)
<a>如果你给它们一个块显示，你可以使用这样的标签。您可以调整边框以提供类似阴影的效果和该按钮感觉的背景颜色:)
回答by rupsray
If you want nice button with rounded corners, then use this class:
如果你想要漂亮的圆角按钮，那么使用这个类：
.link_button {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
background: #4479BA;
color: #FFF;
padding: 8px 12px;
text-decoration: none;
}<a href="#" class="link_button">Example</a>回答by ilyaigpetrov
You may do it with JavaScript:
你可以用 JavaScript 来做：
- Get CSS styles of real button with
getComputedStyle(realButton). - Apply the styles to all your links.
- 获取真实按钮的 CSS 样式
getComputedStyle(realButton)。 - 将样式应用于所有链接。
/* javascript, after body is loaded */
'use strict';
{ // Namespace starts (to avoid polluting root namespace).
const btnCssText = window.getComputedStyle(
document.querySelector('.used-for-btn-css-class')
).cssText;
document.querySelectorAll('.btn').forEach(
(btn) => {
const _d = btn.style.display; // Hidden buttons should stay hidden.
btn.style.cssText = btnCssText;
btn.style.display = _d;
}
);
} // Namespace ends.<body>
<h3>Button Styled Links</h3>
<button class="used-for-btn-css-class" style="display: none"></button>
<a href="//github.io" class="btn">first</a>
<a href="//github.io" class="btn">second</a>
<button>real button</button>
<script>/* You may put JS here. */</script>
</body>回答by graemeboy
As TStamper said, you can just apply the CSS class to it and design it that way. As CSS improves the number of things that you can do with links has become extraordinary, and there are design groups now that just focus on creating amazing-looking CSS buttons for themes, and so forth.
正如 TStamper 所说，您可以将 CSS 类应用于它并以这种方式设计它。随着 CSS 的改进，你可以用链接做的事情变得非常多，现在有设计团队只专注于为主题创建漂亮的 CSS 按钮，等等。
For example, you can transitions with background-color using the -webkit-transition property and pseduo-classes. Some of these designs can get quite nutty, but it's providing a fantastic alternative to what might in the past have had to have been done with, say, flash.
例如，您可以使用 -webkit-transition 属性和伪类使用背景颜色进行过渡。这些设计中的一些可能会变得非常疯狂，但它提供了一种绝佳的替代方案，可以替代过去可能必须使用闪存完成的工作。
For example (these are mind-blowing in my opinion), http://tympanus.net/Development/CreativeButtons/(this is a series of totally out-of-the-box animations for buttons, with source code on the originating page). http://www.commentredirect.com/make-awesome-flat-buttons-css/(along the same lines, these buttons have nice but minimalistic transition effects, and they make use of the new "flat" design style.)
例如（在我看来这些是令人兴奋的）， http://tympanus.net/Development/CreativeButtons/（这是一系列完全开箱即用的按钮动画，原始页面上有源代码）。 http://www.commentredirect.com/make-awesome-flat-buttons-css/（同样，这些按钮具有漂亮但简约的过渡效果，它们使用了新的“扁平”设计风格。）
回答by Andrew Howden
This is what I used. Link button is
这是我用的。链接按钮是
<div class="link-button"><a href="/">Example</a></div>
CSS
CSS
/* body is sans-serif */
.link-button {
margin-top:15px;
max-width:90px;
background-color:#eee;
border-color:#888888;
color:#333;
display:inline-block;
vertical-align:middle;
text-align:center;
text-decoration:none;
align-items:flex-start;
cursor:default;
-webkit-appearence: push-button;
border-style: solid;
border-width: 1px;
border-radius: 5px;
font-size: 1em;
font-family: inherit;
border-color: #000;
padding-left: 5px;
padding-right: 5px;
width: 100%;
min-height: 30px;
}
.link-button a {
margin-top:4px;
display:inline-block;
text-decoration:none;
color:#333;
}
.link-button:hover {
background-color:#888;
}
.link-button:active {
background-color:#333;
}
.link-button:hover a, .link-button:active a {
color:#fff;
}
回答by Muhammad Ashikuzzaman
Use this class. It will make your link look the same as a button when applied using the buttonclass on an atag.
使用这个类。使用标签button上的类应用时，它会使您的链接看起来与按钮相同a。
or
或者
.button {
display: inline-block;
outline: none;
cursor: pointer;
border: solid 1px #da7c0c;
background: #478dad;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .3em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
position: relative;
top: 1px;
}
