Question 44797 in Html Question posted in
Some basic documentation can be found here.

Button Styling isn't working, not sure what to do – Html

I’m still new to learning and I am attempting to add a button but it’s just staying a white rectangle with a border and my text. I’ve tried several things to fix it but I’m lost. I am posting the code also, thank you in advance.
Adding an example of what it looks like, I have a red bg color to show what I am seeing when trying to style it

<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 tried several things, but I am stuck. Not sure where to go next.

Tags:

2

Answers


  1. 0

    Your CSS rule needs to target the button itself:

    • Use button to style every button element
    • Use .loggin-in to style any button with this class
    • Use #login button to style any button inside the login div

    Here is a demo where I’ve created three buttons, given each of them a unique class, and then used the class to apply styles to button 2 and button 3.

    .loggin-in-2 {
  background-color: pink;
}
.loggin-in-3 {
  background-color: orange;
  border: 0;
  padding: 0.5em 1em;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
}
    <div id="login">
    <button class="loggin-in-1">Login</button>
    <button class="loggin-in-2">Login</button>
    <button class="loggin-in-3">Login</button>
</div>
    Login or Signup to reply.
  2. 0

    Add an head tag like this

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    **<link rel="stylesheet" href="index.css">** <!--Styling the page-->
    <title>Document</title>
</head>

    and inside this add the link tag and link it to the filename of your css using the href property

    and in the css file add your required code

    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;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search