如何使链接看起来像一个按钮?

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?

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

If it is possible, how do I do that?

如果可能的话，我该怎么做呢?

16 个解决方案

#1

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/

#2

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

检查引导的文档。一个类。btn存在并与一个标签一起工作，但是您需要添加一个特定的.btn-*类和.btn类。

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

如:< class = " btn btn-info " > < / >

#3

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

你可以很容易地用一个链接来包装一个按钮，比如 <按钮> 我的按钮。

#4

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

#5

Try this: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_elements&stacked=h

试试这个:http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_button_elements&stacked=h
You can use the a href tag line from there.

您可以从那里使用a href标记行。
```
<a href="URL" class="btn btn-info" role="button">Button Text</a>
```

#6

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上运行。

#7

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:

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

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

#8

using the background-image css property on the a
在a上使用背景图像css属性
set display:block & adjust width & height in css
设置显示:块和调整css中的宽度和高度

this should do the trick.

这应该能达到目的。

#9

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)的形式出现。

#10

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)中为您的图像URL添加一个具有src设置的img标记

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

#11

You can create a class for the anchor elements that you would like to display as buttons.

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

Eg:

例如:

Using an image :

使用一个图像:

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

or using a pure CSS approach:

或者使用纯CSS方法:

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

Always remember to hide the text with something like:

记住要把文字隐藏起来，比如:

text-indent: -9999em;

An excellent gallery of pure CSS buttons is here and you can even use the css3 button generator

这里有一个优秀的纯CSS按钮库，您甚至可以使用css3按钮生成器

Plenty of styles and choices are here

这里有很多风格和选择

good luck

祝你好运

#12

Just take regular css button designs, and apply that CSS to a link (in exactly the same way as you would to a button).

只要采用常规的css按钮设计，并将css应用到一个链接(与你对按钮的应用完全相同)。

Example:

例子:

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

#13

Tested with Chromium 40 and Firefox 36

使用Chromium 40和firefox36测试

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

#14

You have got two options for consistency.

对于一致性，你有两个选择。

Use framework-specific tags, and use them throughout the website.
使用特定于框架的标签，并在整个网站中使用它们。
Use JavaScript to emulate a link on a button element, and then have the button consistent with browser's buttons look. Those css button-look hacks will never be accurate.
使用JavaScript模拟按钮元素上的链接，然后让按钮与浏览器的按钮一致。那些css按钮样式的黑客永远不会是准确的。

。

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

return false; is to prevent the default behavior of the button being clicked.

返回错误;是为了防止单击按钮的默认行为。

#15

-1

Try this code:

试试这段代码:

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

Watch this (It will explain how to do it) - https://youtu.be/euti4HAJJfk

看这个(它会解释怎么做)- https://youtu.be/euti4HAJJfk。

#16

-3

A simple as that :

就这么简单:

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

Just add "class="btn btn-success" & role=button

只添加“class=”btn btn-success“和role=button”。

#1