sun qingyao sun qingyao - 1 year ago 56
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>
<p class="btn btn-danger">Donate Now</p>
, but the former is too small, while the latter seems strange on hover.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="//" rel="stylesheet">
<link href="/static/knowledge/index.css" rel="stylesheet">

<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>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<a href="#" class="btn btn-danger">Donate Now</a>
<!--/.nav-collapse -->

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

Answer Source

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.

       <a class="btn btn-danger btn-lg">Donate Now</a>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download