My header design consists of two lists of buttons, one on the left and one on the right. I am looking to customize the background color of the "Sign Up" button to make it stand out. Below is an example of what I want and the current design of my header along with the code:
Desired Design: https://i.sstatic.net/g2zLV.png
Current Design: https://i.sstatic.net/SXIuj.png
<!-- html: -->
header {
min-height: 20px;
}
header a {
color: #3b4b5d;
text-decoration: none;
}
section h1 {
margin: 0;
}
/* TOP NAV CSS */
.top-nav {
width: 100%;
margin: auto;
overflow: hidden;
}
.nav-logo img {
float: left;
width: 120px;
padding: 20px 12px 20px 20px;
}
.left-nav ul li {
margin: 10px 16px 0px 16px;
padding: 0px 0px 0px 24px;
font-size: 16px;
text-decoration: none;
display: inline-block;
float: left;
text-align: center;
}
header a:hover {
color: #50E3C2;
}
.right-nav ul li {
margin: 10px 16px 0px 16px;
padding: 0px 24px 0px 0px;
font-size: 16px;
text-decoration: none;
display: inline-block;
float: right;
text-align: center;
}<header>
<div class="top-nav">
<div id="branding">
<a href="index.html" class="nav-logo"><img src="assets/nav-bar-logo.png" alt="trooops-logo"></a>
</div>
<nav class="left-nav">
<ul>
<li><a href="discover.html">Discover</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</nav>
<div class="right-nav">
<ul>
<li><a href="signup.html" style="background-color: #FF5733;">Sign Up</a></li>
<li><a href="login.html">Log In</a></li>
</ul>
</div>
</div>
</header>