sun qingyao sun qingyao - 2 months ago 7
CSS Question

How to make coloured buttons in bootstrap navbar?

I want to have a big red "Donate" button with white text in the navber, and my solution was

<a href="#" class="btn btn-danger">Donate Now</a>
. However, the button seems to turn transparent on hover.

I've also tried
<span class="label label-danger">Danger</span>
and
<p class="btn btn-danger">Donate Now</p>
, but the former is too small, while the latter seems strange on hover.



<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/knowledge/index.css" rel="stylesheet">
</head>

<body>
<div class="header">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="btn btn-danger">Donate Now</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</div>
</body>





In case my problem cannot be reproduced by the code above, I also created this fiddle.

Answer

You've used a label in your fiddle instead of a button. And you're not supposed to use buttons where a Navigation link belongs, but you're able to bypass this with a simple wrapper.

<li>
    <span>
       <a class="btn btn-danger btn-lg">Donate Now</a>
    </span>
</li>