Html 如何使 <a href=""> 链接看起来像一个按钮？

How to make <a href=""> link look like a button?

提问by GeekedOut

I have this button image:

我有这个按钮图片：

I was wondering whether it would be possible to make a simple <a href="">some words</a>and style that link to appear as that button?

我想知道是否有可能制作一个简单<a href="">some words</a>和样式的链接以显示为该按钮？

If it is possible, how do I do that?

如果可能，我该怎么做？

采纳答案by Declan Cook

Using CSS:

使用 CSS：

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

<a class="button">Add Problem</a>

http://jsfiddle.net/GCwQu/

http://jsfiddle.net/GCwQu/

回答by Gildas Ross

Check Bootstrap's docs. A class .btnexists and works with the atag, but you need to add a specific .btn-*class with the .btnclass.

检查Bootstrap 的文档。一个类.btn存在并使用该a标签，但您需要为.btn-*该类添加一个特定的.btn类。

eg: <a class="btn btn-info"></a>

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

回答by Antagonist

you can easily wrap a button with a link like so <a href="#"> <button>my button </button> </a>

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

回答by dash

Something like this would resemble a button:

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

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

See http://jsfiddle.net/r7v5c/1/for an example.

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

回答by Sleepy B

1. Try this:

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

2. You can use the a hreftag line from there.

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

1. 尝试这个：

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

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

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

回答by botmsh

If you'd like to avoid hard-coding a specific design with css, but rather rely on the browser's default button, you can use the following css.

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

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

Notice that it probably won't work on IE.

请注意，它可能不适用于 IE。

回答by Mladen Adamovic

None of other answers shows the code where the link button changes its appearance on hover.

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

This is what I've done to fix that:

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

HTML:

HTML：

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

CSS:

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/

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

回答by dweeves

• Use the background-imageCSS property on the <a>tag
• Set display:blockand adjust widthand heightin CSS

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

This should do the trick.

这应该可以解决问题。

回答by r0skar

Yes you can do that.

是的，你可以这样做。

Here is an example:

下面是一个例子：

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

Of course you can modify the above example to your need. The important thing is to make it appear as a block (display:block) or an inline block (display:inline-block).

当然，您可以根据需要修改上面的示例。重要的是使其显示为块 ( display:block) 或内联块 ( display:inline-block)。

回答by msmucker0527

For basic HTML, you can just add an img tag with the src set to your image URL inside the HREF (A)

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

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