如何使 HTML 锚标记（或链接）看起来像一个按钮？答案

【问题标题】：How to make an HTML anchor tag (or link) look like a button?如何使 HTML 锚标记（或链接）看起来像一个按钮？
【发布时间】：2012-01-11 12:36:44
【问题描述】：

我有这个按钮图片：

我想知道是否可以制作一个简单的

<a href="">some words</a>

并将该链接设置为显示为该按钮的样式？

如果可能，我该怎么做？

【问题讨论】：

css-tricks.com/examples/ButtonMaker
我猜是使用 CSS ;) google.com.ua/search?q=style+anchor+tag+like+button
用户应该通过 Web 界面的外观知道它的行为是什么......所以按钮的外观不应该用作链接，并且链接的视觉外观不应该用作按钮。
通常一个按钮需要多个图像：标准、悬停、按下、激活。否则会感觉不自然。
顺便说一下，这个页面上的 “按钮”正是您所要求的。

标签： html css

【解决方案1】：

和许多其他人一样，但在 css 中有解释。

/* select all <a> elements with class "button" */
a.button {
  /* use inline-block because it respects padding */
  display: inline-block;
  /* padding creates clickable area around text (top/bottom, left/right) */
  padding: 1em 3em;
  /* round corners */
  border-radius: 5px;
  /* remove underline */
  text-decoration: none;
  /* set colors */
  color: white;
  background-color: #4E9CAF;
}

&lt;a class="button" href="#"&gt;Add a problem&lt;/a&gt;

【讨论】：

【解决方案2】：

使用 CSS：

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    line-height: 25px;
}

&lt;a class="button"&gt;Add Problem&lt;/a&gt;

http://jsfiddle.net/GCwQu/

【讨论】：

这仅适用于我直接将其应用于a 标签（a {display: block ...}），这是不可接受的。您知道为什么a 标签内的class 属性不起作用吗？ :( 我正在使用 Firefox 27。我也尝试过a.button {...}，但它也不起作用。
如果您使用引导程序，您可以执行并使用现有引导程序样式并避免定义新样式。
如果按钮中有下划线，请添加text-decoration:none

【解决方案3】：

只需采用常规的 CSS 按钮设计，然后将该 CSS 应用于链接（与应用于按钮的方式完全相同）。

例子：

<a href="#" class="stylish-button">Some words</a>

<style type="text/css">
.stylish-button {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    color:#333;
    background-color:#FA2;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-size:16px;
    font-weight:700;
    padding:4px 16px;
    text-shadow:#FE6 0 1px 0
}
</style>

【讨论】：

我在过去的项目中已经这样做了，IE 拒绝表现。我已经测试了这段代码，但我想说明一个需要更多理由的问题。

【解决方案4】：

对于那些在添加 active 和 focus 后遇到问题的人为您的按钮提供类或 id 名称并将其添加到 css

例如

//html代码

<button id="aboutus">ABOUT US</button>

//css代码

#aboutus{background-color: white;border:none;outline-style: none;}

【讨论】：

【解决方案5】：

试试这个：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Button Tags</h2>
  <a href="#" class="btn btn-info" role="button">Link Button</a>
  <button type="button" class="btn btn-info">Button</button>
  <input type="button" class="btn btn-info" value="Input Button">
  <input type="submit" class="btn btn-info" value="Submit Button">
</div>

您可以从那里使用href 标记行。

<a href="URL" class="btn btn-info" role="button">Button Text</a>

【讨论】：

【解决方案6】：

在<a> 标签上使用background-image CSS 属性
在 CSS 中设置 display:block 并调整 width 和 height

这应该可以解决问题。

【讨论】：

【解决方案7】：

您有两种选择来保持一致性。

使用特定于框架的标签，并在整个网站中使用它们。
使用 JavaScript 模拟按钮元素上的链接，然后使按钮与浏览器按钮的外观保持一致。那些 CSS 按钮外观的技巧永远不会准确。

.

<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>

return false;是防止按钮被点击的默认行为。

【讨论】：

【解决方案8】：

试试这个代码：

<code>

    <a href="#" class="button" > HOME </a>

    <style type="text/css">

        .button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}

        .button:hover { background-color: #0066FF; }

    </style>

</code>

观看这个（它将解释如何做）-https://youtu.be/euti4HAJJfk

【讨论】：

欢迎来到 StackOverflow！请在您的帖子中包含所有相关代码，并且不要仅包含指向外部网站的链接。链接非常适合附加信息，但您的帖子应该独立于任何其他资源 - 链接可能会更改或“失效”。其他程序员应该能够直接从您的回答中解决问题中详述的问题。

【解决方案9】：

检查Bootstrap's docs。类 .btn 存在并与 a 标记一起使用，但您需要使用 .btn 类添加特定的 .btn-* 类。

例如：<a class="btn btn-info"></a>

【讨论】：

太棒了。我正在使用 Bootstrap，但不知道；P
在最新版本的引导程序中，您需要一个带有 btn 类的特定 btn-* 类。例如：

【解决方案10】：

没有其他答案显示链接按钮在悬停时更改其外观的代码。

这是我为解决这个问题所做的：

HTML：

<a href="http://www.google.com" class="link_button2">My button</a>

CSS：

.link_button2 {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #1A4575;
  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: #3A68A1;
  color: #fee1cc;
  text-decoration: none;
  padding: 8px 12px;
  text-decoration: none;
  font-size: larger;
}

a.link_button2:hover {
  text-decoration: underline;
  background: #4479BA;
  border: solid 1px #20538D;

  /* optional different shadow on hover
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
  */

}

JSFiddle： https://jsfiddle.net/adamovic/ovu3k0cj/

【讨论】：

【解决方案11】：

就这么简单：

<a href="#" class="btn btn-success" role="button">link</a>

只需添加“class="btn btn-success" & role=button

【讨论】：

这个问题没有引导标签。 class="btn btn-success" 是一个引导类。

【解决方案12】：

使用 Chromium 40 和 Firefox 36 测试

<a href="url" style="text-decoration:none">
   <input type="button" value="click me!"/>
</a>

【讨论】：

这不是有效的 HTML。

【解决方案13】：

如果您想避免使用 css 对特定设计进行硬编码，而是依赖浏览器的默认按钮，则可以使用以下 css。

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

请注意，它可能无法在 IE 上运行。

【讨论】：

浏览器支持的当前状态见caniuse.com/#feat=css-appearance；请注意，浏览器呈现 appearance: button 的方式可能与原生按钮不同（至少在我刚刚检查 Chrome 78 时）。
这正是我想要的，但它特别不适用于 chrome 中的 <a>。在<span> 上进行了测试，效果很好。

【解决方案14】：

您可以为要显示为按钮的锚元素创建一个类。

例如：

使用图片：

.button {
   display:block;
   background: url('image');
   width: same as image
   height: same as image
}

或使用纯 CSS 方法：

.button {
    background:#E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
}

永远记得用类似这样的东西隐藏文本：

text-indent: -9999em;

一个优秀的纯 CSS 按钮库是 here 你甚至可以使用css3 button generator

大量的样式和选择是here

祝你好运

【讨论】：

【解决方案15】：

这样的东西就像一个按钮：

a.LinkButton {
  border-style: solid;
  border-width : 1px 1px 1px 1px;
  text-decoration : none;
  padding : 4px;
  border-color : #000000
}

有关示例，请参阅 http://jsfiddle.net/r7v5c/1/。

【讨论】：

添加边框半径：5px；将完成外观。

【解决方案16】：

对于基本的 HTML，您只需在 HREF (A) 中添加一个带有 src 设置的 img 标签到您的图像 URL

<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>

【讨论】：

【解决方案17】：

你可以很容易地用<a href="#"> <button>my button </button> </a>这样的链接来包装一个按钮

【讨论】：

他们应该改变这个规范；这对我来说最有意义。
你不应该在锚标签内使用按钮。看到这个 - stackoverflow.com/questions/6393827/…

【解决方案18】：

是的，你可以这样做。

这是一个例子：

a{
    background:IMAGE-URL;
    display:block;
    height:IMAGE-HEIGHT;
    width:IMAGE-WIDTH;
}

当然你可以根据你的需要修改上面的例子。重要的是让它显示为块 (display:block) 或内联块 (display:inline-block)。

【讨论】：

你应该保持 display: inline;而不是使用 height 和 width ，您应该使用 padding 和 line height 来调整锚点的大小
@Antagonist：由于 OP 想要一个图像作为背景，而且他很可能总是使用相同的，我不明白他为什么不应该使用该图像的特定高度和宽度。但我想 OP 会尝试所有建议的解决方案并选择对他来说最好的解决方案。
我的意思是，使用其他css属性来实现同样的事情，并保持原来的显示属性内联...