使按钮看起来与链接相同

时间:2016-08-23 16:17:17

标签: html css

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

我正在尝试将“我的个人资料”链接看作与其旁边的“注销”链接完全相同。

他们都使用相同的类,所以我猜他们看起来不同的原因是一个是链接而另一个是按钮。我需要做些什么来使它们相同?

3 个答案:

答案 0 :(得分:3)

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

小提琴和代码段:https://jsfiddle.net/dy1a2tkh/2/

&#13;
&#13;
.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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

继续添加这个:

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

答案 2 :(得分:0)

你正在做a.hb-5,因为它是父母的hb-5。因此,样式不起作用。所以,你可以使用

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