如何使 HTML 锚标记(或链接)看起来像一个按钮？

小开

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

这个应该能行。

小开

Yes you can do that.

这里有一个例子:

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

小开

您可以很容易地包装一个按钮与链接，如 <a href="#"> <button>my button </button> </a>

小开

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

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

小开

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

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

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

小开

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

例如:

Using an image :

.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 按钮的一个极好的图库是 < a href = “ http://hellohappy.org/css3-Button/”rel = “ nofollow”> 这里 and you can even use the css3 button generator

Plenty of styles and choices are 给你

祝你好运

小开

最佳答案

使用 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;
}

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

http://jsfiddle.net/GCwQu/

小开

检查 Bootstrap 的文件。类 .btn存在并使用 a标记，但是您需要使用 .btn类添加特定的 .btn-*类。

例句: <a class="btn btn-info"></a>

小开

只需采用常规的 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>

小开

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

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

请注意，它可能无法在 IE 上工作。

小开

试试这个:

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

小开

使用 Chromium 40和 Firefox 36进行测试

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

小开

就这么简单:

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

只需添加“ class = “ btn btn-Success”& role = Button

小开

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

为了弥补这一点，我做了以下工作:

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/

小开

试试这个代码:

<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

小开

为了保持一致性，你有两个选择。

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

.

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

return false;是为了防止单击按钮的默认行为。

小开

对于那些有问题后，增加积极和重点给你的按钮一个类名或者 ID 名，然后把它添加到 css 中

比如说

//html 代码

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

//css 代码

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

小开

Like so many others, but with explanation in the 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;
}

<a class="button" href="#">Add a problem</a>