title: How to make a button light up on hover with twitter bootstrap
body: <p>I'm building a site using the twitter bootstrap CSS, but I've run into a problem.</p>
  
  <p><a href="http://twitter.github.io/bootstrap/scaffolding.html#responsive" rel="nofollow">nav bar example</a></p>
  
  <p>If you look towards the end, "Bootstrap" is sort of hidden; it only lights up when you mouseover it (but it is, by default, black). How do I get this functionality for a button in my webpage?</p>
  
  <p>Here's my navbar:</p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
            &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
             &lt;a href="./home.html" class="brand" color="black"&gt;&lt;/a&gt;
            &lt;div class="nav-collapse collapse"&gt;
              &lt;ul class="nav"&gt;
                &lt;li class="active"&gt;
                  &lt;a href="#"&gt;Home&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=""&gt;
                  &lt;a href="./tutoring.html"&gt;Tutoring&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=""&gt;
                  &lt;a href="./competitions.html"&gt;Competitions&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=""&gt;
                  &lt;a href="./board.html"&gt;Board Members&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=""&gt;
                  &lt;a href="./info.html"&gt;Info&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=""&gt;
                  &lt;span class="span5"&gt;&lt;/span&gt;
                &lt;/li&gt;
                &lt;li class="" id="algebrayall"&gt;
                  &lt;a class="brand pull-right" style="color:black" href="./index.html"&gt;It's just algebra, y'all&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the <code>&lt;a class="brand pull-right" style="color:black" href="./index.html"&gt;It's just algebra, y'all&lt;/a&gt;</code> part to work like their Bootstrap button.</p>