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

Question

我有这个按钮图像:

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

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

Answer 1

检查Bootstrap的文档.类.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 href="#"> <button>my button </button> </a>

Answer 4

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

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 5

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 href="URL" class="btn btn-info" role="button">Button Text</a>
   

Answer 6

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

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

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