HTML // please help me

I want to make a button “Try it for free”, on YouTube one person suggests using a modification of “nav__link–btn” (two -) in the “nav__link” class in html and “&–btn {}” (two -) in css, I use it, but the demo does not work out what I wanted … (5 and 4 in browser)

Why doesn’t the --btn modifier work for me? What should I do in this case?

=======================HTML=======================
            <nav class="nav">
                <a class="nav__link" href="#"> Home </a>
                <a class="nav__link" href="#"> Key Features</a>
                <a class="nav__link" href="#"> Pricing </a>
                <a class="nav__link" href="#"> Testiminial </a>
                <a class="nav__link" href="#"> FAQ </a>
                <a class="nav__link nav__link--btn" href="#"> Try for free </a>
            </nav>
=======================================================
========================CSS===================
.nav {
    display: flex;
    font-size:16px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    align-items: center


}

.nav__link {
    margin-left:50px;
    color: #242f51;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity .1s linear;

    &--btn {
    padding:20px 20px ;
    border:2px solid #242f51;
    border-radius: 20px;
    }
}
=====================================================

Hi there. 👋

Indenting your CSS that way isn’t supported by regular CSS, for that, you’d need a pre-processor like SASS which has support for those features.

.nav__link {
    margin-left:50px;
    color: #242f51;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity .1s linear;
}

.nav__link--btn {
    padding:20px 20px ;
    border:2px solid #242f51;
    border-radius: 20px;
}

This should work just fine. :slightly_smiling_face:

2 Likes

thank you very much!) Thanks to your advice, it worked for me)

2 Likes