As someone who is new to learning, I am currently struggling with styling a button on my website. No matter what I try, it remains a white rectangle with just a border and some text. I have included the code for reference. Any help or advice would be greatly appreciated. I have added an example image with a red background to illustrate how the button appears after my attempts at styling
<header>
<div class="logo">Swift Records</div>
<button class="mobile-nav-toggle" aria-controls="primary-nav" aria-expanded="false">
<span class="sr-only">Menu</span> </button>
<nav>
<ul class="navbar" id="primary-nav" data-visible="false">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Browse</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div id="login">
<button class="loggin-in">LOGIN</button>
</div>
</header>
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar {
display: flex;
gap: var(--gap, 5rem);
list-style: none;
margin: 0;
}
.navbar a {
text-decoration: none;
background-color: aqua;
}
.mobile-nav-toggle {
display: none;
}
.sr-only {
display: none;
}
@media (max-width: 35em) {
.navbar {
position: fixed;
inset: 0 0 0 20%;
background-color: #facfbce6;
flex-direction: column;
padding: min(30vh, 10rem);
backdrop-filter: blur(0.5rem);
gap:var(--gap, 2rem);
font-size: 20px;
z-index: 1000;
transform: translateX(100%);
}
.mobile-nav-toggle {
position: absolute;
display: block;
z-index: 9999;
width: 2rem;
aspect-ratio: 1;
top: 2rem;
right: 2rem;
background-color: blue;
background: url('mobile-menu-btn.png');
background-repeat: no-repeat;
border: 0;
}
}
.logo {
text-decoration: none;
margin-top: 2rem;
}
#login {
padding-right: 10px;
padding-top: 2px;
margin-top: 2rem;
background-color: red;
}
I've attempted various solutions but still can't seem to get it right. Any suggestions on what to do next?