html - 使按钮看起来与链接相同

Question

https://jsfiddle.net/dy1a2tkh/1/

header_buttons {
color: #fff;
background: #00cc66;
border-radius: 8px;
margin: 5px;
padding: 6px 6px 6px 10px;
font-size: 30px;
font-family: 'Lobster', cursive;
text-decoration: none;
display: inline-block;

}

.hb-4,
.hb-5,
a.hb-5{
background: #00cc66;
float: right;
text-decoration: none;
}

我正在尝试让“我的个人资料”链接看起来与旁边的“注销”链接完全一样。

它们都使用相同的类，所以我猜它们看起来不同的原因是一个是链接而另一个是按钮。我需要做什么才能使它们完全相同？

Answer 1

大多数浏览器都会为 <input> 添加样式和 <a>元素为例。您还必须删除它们/为特定元素设置自定义样式。

Fiddle 和代码片段:https://jsfiddle.net/dy1a2tkh/2/

.header_buttons {
  background: #00cc66;
  border-radius: 8px;
  margin: 5px;
  padding: 6px 6px 6px 10px;
  font-size: 30px;
  font-family: 'Lobster', cursive;
  display: inline-block;
}

.header_buttons, .header_buttons > a {
  text-decoration: none;
  color: #fff;
}

.hb-4,
.hb-5,
a.hb-5{
  background: #00cc66;
  float: right;
  text-decoration: none;
}

input {
  border: none;
}

<input type="submit" name="logout" class="hb-4 header_buttons" value="Log Out" />
<div class="hb-5 header_buttons"><a href="test">My Profile</a></div>