Why isn't my button style changing? - html

Question

I am trying to do a custom button style in my navbar in bootstrap but it's taking on the default styles of the navbar. What I am trying to do is make two buttons in the navbar that say sign up and login. I want them to be in-line with the rest of the menu items but to be "buttons" that have a border with no background. Yet they appear with the btn-primary coloring.
This is the code I am using:
.btn.outline {
background: none !important;
padding: 12px 12px;
}
.btn-primary.outline {
border: 2px solid #0099cc;
color: #0099cc;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
color: #33a6cc;
border-color: #33a6cc;
}
.btn-primary.outline:active, .btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
I call to it like this:
<li>
<p class="navbar-btn">
Sign Up
</p>
</li>
Can anyone spot what I am doing or missing causing it to ignore my CSS?
Thanks!
Edit: I used the !important in hopes it would override the bootstrap.css
Edit again: here's my navbar code:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home"><img src="Landing/img/logo3.png" class="img-responsive2"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right mainnav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
<p class="navbar-btn">
Sign Up
</p>
</li>
<li>
<p class="navbar-btn">
Login
</p>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

Answer 1

Looks like it's working to me using BS 3.3.4.
I grabbed the default navbar code from the BS website and placed yours into it. Check this fiddle - it's a button with no background and a blue border.
Perhaps you have some things in the wrong place?
<style>
.btn.outline {
background: none !important;
padding: 12px 12px;
}
.btn-primary.outline {
border: 2px solid #0099cc;
color: #0099cc;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
color: #33a6cc;
border-color: #33a6cc;
}
.btn-primary.outline:active, .btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
</style>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<p class="navbar-btn">
Sign Up
</p>
</li>
</ul>
</div>
</div>
</nav>