Links in Bootstrap navbar behave differently - html

Question

I'm making a navbar using Bootstrap, which can be seen here
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?
Code included below.
HAML:
%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' => 'modal',
'data-target' => '#explainQuestionModal'}
Explain Question
%button.btn.btn-link
Preview
%button.btn.btn-link
= link_to 'Save and exit', root_path
= render 'explain_question_modal'
HTML:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<%= link_to image_tag("logo-builder.png"), root_path %>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button">
Explain Question
</button>
<button class="btn btn-link">
Preview
</button>
<button class="btn btn-link">
<%= link_to 'Save and exit', root_path %>
</button>
</li>
</ul>
</nav>
<%= render 'explain_question_modal' %>
CSS:
.btn-link {
color:grey !important;
font-size:0.9em;
}
.btn-link:hover {
color:white;
}
.btn-link:focus {
color:white;
}

Answer 1

Because you are styling a button with class .btn-link but "save and exit" has a a link as child of that button which is wrapping the text "Save and Exit"
so you need to add .btn-link a {color:grey} to apply the color to the link
Note: I fixed the :hover to work with a as well
Snippet
.btn-link {
color: grey;
font-size: 0.9em;
}
/*added*/
.btn-link a {
color: grey;
text-decoration:none;
display:block
}
.btn-link:hover, .btn-link:hover a {
color:white;
}
.btn-link:focus, .btn-link:focus a {
color:white;
}
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a href="#">
<img src="//lorempixel.com/100/100" />
</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button">
Explain Question
</button>
<button class="btn btn-link">
Preview
</button>
<button class="btn btn-link">
Save and exit
</button>
</li>
</ul>
</nav>

Answer 2

As an alternative, you don't necessarily have to use buttons, you can just use a tags for simplification.
Working example Snippet
.nav-item .nav-link {
color: grey;
outline: none;
}
.nav-item .nav-link:hover,
.nav-item .nav-link:focus {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" data-toggle="modal" href="#explainQuestionModal">Explain Question</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/">Preview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/">Save and Edit</a>
</li>
</ul>
</nav>
<div class="modal fade" id="explainQuestionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Title</h4>
</div>
<div class="modal-body">
Body
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
HAML Example
%nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse
%a.navbar-brand{:href => "#"} Brand
%ul.nav.navbar-nav.pull-xs-right
%li.nav-item
%a.nav-link{'data-toggle' => 'modal', 'data-target' => '#explainQuestionModal'}
Explain Question
%li.nav-item
%a.nav-link{:href => "/preview"}
Preview
%li.nav-item
%a.nav-link{:href => "/save"}
Save and Edit
.modal.fade#explainQuestionModal(tabindex="-1" role="dialog" aria-labelledby="explainQuestionModal" aria-hidden="true")
.modal-dialog(role="document")
.modal-content
.modal-header
%button.close(type="button" data-dismiss="modal" aria-label="Close")
%span(aria-hidden="true") ×
%h4.modal-title#explainQuestionModal Title
.modal-body
%p Body
.modal-footer
%button.btn.btn-secondary(type="button" data-dismiss="modal") Close
%button.btn.btn-primary(type="button") Save changes