使按鈕看起來一樣的鏈接

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

使按鈕看起來一樣的鏈接

回答

相關問題