使按钮看起来一样的链接

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

我试图让我的个人资料链接看起来完全一样的注销链接就在旁边。

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

来源

2016-08-23 Pickle

例如，大多数浏览器将样式添加到<input>和<a>元素。您必须删除它们，并为特定元素设置自定义样式。

小提琴和代码片段：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>

来源

2016-08-23 16:24:40 Paul

来吧，加入这一个：

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

来源

2016-08-23 16:25:04 Evgeny

你在做a.hb-5作为一个有父母hb-5。所以，款式不适用。因此，您可以使用

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

来源

2016-08-23 16:29:26

使按钮看起来一样的链接

回答

相关问题