按钮链接样式不起作用

我正在为自举而工作在自己的变更位置，我目前正在使用按钮和链接。按钮在按钮元素内有锚点标记，但链接样式显示出来。按钮链接样式不起作用

HTML

<button class="btn-danger"><a href="#">Danger</a></button> 
<button class="btn-error"><a href="#">Error</a></button> 
<button class="btn-success"><a href="#">Success</a></button> 
<button class="btn-info"><a href="#">Info</a></button>

CSS

button.btn-info a:visited a:active a:link a:hover{ 
    color:#0066CC; 
    text-decoration: none; 
}

来源

2015-09-26 AnonyDev

您的HTML无效。你不能在按钮中有链接（反之亦然）。试图做到这一点往往会导致从浏览器到浏览器的不一致的交互结果。如果你想要一个链接，请使用链接。如果你想要一个按钮，使用一个按钮。不管你喜欢，应用CSS来使它看起来像。 – Quentin

^这是一个公平的评论 – MrCarrot

@Quentin然后我会怎么做？我会做一个输入元素，并将它的类型按钮和动作的URL？ – AnonyDev

你错过了逗号出来。你的CSS更改为

button.btn-info a:visited, 
button.btn-info a:active, 
button.btn-info a:link, 
button.btn-info a:hover { 
    color:#0066CC; 
    text-decoration: none; 
}

编辑：

基于以上昆汀的评论，他是正确的，你的HTML是无效的。你不应该在按钮里面有一个锚点。因此，我建议你改变你的CSS：

.btn-info { 
    color:#0066CC; 
    text-decoration: none; 
}

然后请执行：根据您的应用程序

<button class="btn-info">Info</button>

：

<a href="#" class="btn-info">Info</a>

或。

来源

2015-09-26 16:22:52 MrCarrot

干杯！我必须等待一段时间才能将其标记为答案。 – AnonyDev

按钮链接样式不起作用

回答

相关问题