Question

我有这个按钮图像：
enter image description here

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

如果有可能，我该怎么做？

Answer 1

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

您可以使用<a href="#"> <button>my button </button> </a>

之类的链接轻松打开按钮

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

Answer 6

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

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

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/

Answer 7

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

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

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

Answer 8

使用background-image标记

<a>

设置display:block并调整CSS中的width和height

这应该可以解决问题。

Answer 9

是的，你可以做到。

以下是一个例子：

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

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

Answer 10

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

使用特定于框架的标记，并在整个网站中使用它们。
使用JavaScript模拟按钮元素上的链接，然后使按钮与浏览器的按钮一致。那些css按钮式黑客将永远不会准确。

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

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

Answer 11

只需定期css button designs，然后将该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>

Answer 12

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

例如：

使用图片：

.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

有很多风格和选择祝你好运

Answer 13

对于基本HTML，您只需添加一个img标记，其中src设置为HREF（A）中的图像URL

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

Answer 14

适用于在添加活动和焦点后有问题的人为按钮指定一个类或ID名称，并将其添加到CSS

例如

// html代码

alter default privileges

// css代码

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

Answer 15

和其他很多人一样，但是在CSS中有解释。

a.button {
  /* padding creates clickable area around text (top/bottom, left/right) */
  padding: 1em 3em;
  /* use inline-block because it respects padding */
  display: inline-block;
  /* 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>

Answer 16

使用Chromium 40和Firefox 36进行测试

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

Answer 17

试试这段代码：

<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

Answer 18

这很简单：

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

只需添加＆＃34; class =＆＃34; btn btn-success＆＃34; ＆安培;角色=按钮

如何制作<a href=""> link look like a button?</a>

18 个答案: