如何使<a href="">链接看起来像一个button？
我有这个button图像： 
我想知道是否有可能做出一个简单的<a href="">some words</a>和风格的链接显示为该button？
如果可能的话，我该怎么做？
使用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>
检查Bootstrap的文档 。 一个类.btn存在并且与a标签一起工作，但是你需要添加一个具有.btn-*类的特定的.btn-*类。
例如： <a class="btn btn-info"></a>
你可以很容易地用一个像<a href="#"> <button>my button </button> </a>这样的链接来包装一个button
像这样的东西就像一个button：
a.LinkButton { border-style: solid; border-width : 1px 1px 1px 1px; text-decoration : none; padding : 4px; border-color : #000000 }
-
试试这个： http : //www.w3schools.com/bootstrap/tryit.asp? filename=trybs_button_elements&stacked= h
-
你可以从那里使用一个href标签行。
<a href="URL" class="btn btn-info" role="button">Button Text</a>
如果你想避免用css硬编码一个特定的devise，而是依靠浏览器的默认button，你可以使用下面的CSS。
a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; }
请注意，它可能不会在IE浏览器上工作。
没有其他答案显示链接button在hover时更改其外观的代码。
这是我已经做了解决这个问题：
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/
- 在a上使用background-image css属性
- 设置显示：块和调整宽度和高度在CSS
这应该做的伎俩。
是的，你可以这么做。
这里是一个例子：
a{ background:IMAGE-URL; display:block; height:IMAGE-HEIGHT; width:IMAGE-WIDTH; }
当然你可以根据需要修改上面的例子。 重要的是使它看起来像一个块（ display:block ）或一个内联块（ display:inline-block ）。
对于基本的HTML，你可以在HREF（A）里面添加一个img标签，把src设置为你的图片URL，
<a href="http://www.google.com"><img src="http://problemio.com/img/ui/add_problem.png" /></a>
您可以为要显示为button的定位元素创build一个类。
例如：
使用图像：
.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;
一个优秀的纯CSSbutton库在这里 ，你甚至可以使用css3button生成器
这里有很多风格和select
祝你好运
只需要定期的CSSbuttondevise ，并将该CSS应用到链接（与button的使用方式完全相同）。
例：
<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>
使用Chromium 40和Firefox 36进行testing
<a href="url" style="text-decoration:none"> <input type="button" value="click me!"/> </a>
试试这个代码：
<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
这么简单：
<a href="#" class="btn btn-success" role="button">link</a>
只需添加“class =”btn btn-success“＆role = button
