title: Links in Bootstrap navbar behave differently
body: <p>I'm making a navbar using Bootstrap, which can be seen <a href="http://imgur.com/vVU2KaY" rel="nofollow">here</a> </p>
  
  <p>All links are behaving the same way except the 'Save and exit' link. What can I do to make 'Save and Exit' look the same? Don't know why it keep being blue when it's meant to be grey as the other links?</p>
  
  <p>Code included below.</p>
  
  <p><strong>HAML:</strong></p>
  
  <pre><code>%nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse
  
    = link_to image_tag("logo-builder.png"), root_path
  
    %ul.nav.navbar-nav.pull-xs-right
  
      %li.nav-item
        %button.btn.btn-link{type: 'button', 'data-toggle' =&gt; 'modal', 
        'data-target' =&gt; '#explainQuestionModal'}
          Explain Question
  
        %button.btn.btn-link
          Preview
  
        %button.btn.btn-link
          = link_to 'Save and exit', root_path
  
  = render 'explain_question_modal'
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;nav class="navbar navbar-fixed-top navbar-dark bg-inverse"&gt;
    &lt;%= link_to image_tag("logo-builder.png"), root_path %&gt;
    &lt;ul class="nav navbar-nav pull-xs-right"&gt;
      &lt;li class="nav-item"&gt;
        &lt;button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button"&gt;
          Explain Question
        &lt;/button&gt;
        &lt;button class="btn btn-link"&gt;
          Preview
        &lt;/button&gt;
        &lt;button class="btn btn-link"&gt;
          &lt;%= link_to 'Save and exit', root_path %&gt;
        &lt;/button&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;%= render 'explain_question_modal' %&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.btn-link {
    color:grey !important;
    font-size:0.9em;
  }
  
  .btn-link:hover {
    color:white;
  }
  
  .btn-link:focus {
    color:white;
  }
  </code></pre>