1
resposta

[Bug] problema no botão

Boa Noite, estou tentando estilizar o botão, ele não está recebendo essas estilizações

header.scss/componentes

@use '../abstract/variaveis';

header{
    background: variaveis.$gradiente-primario;
    padding: 2rem;
    nav{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.6rem;
        .linha{
            border-top: 1px solid black;
            width: 80%;
        }
        ul{
            display: inline-flex;
            gap: 2rem;
            li{
                list-style-type: none;
            }
            a{
                text-decoration: none;
                color: variaveis.$cor-primaria;
                font-weight: 500;
                font-family: variaveis.$ft-textos;
            }
        }
    }
    #home{
        max-width: 1040px;
        width: 80%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .textos-home{
            max-width: 464px;
            h1{
                font-size: 42px;
                color: variaveis.$cor-primaria;
                margin-bottom: 2rem;
                font-family: variaveis.$ft-titulos;
                span{
                    color: variaveis.$cor-secundaria;
                }
            }
            .btn-main{
                width: 280px;
                height: 66px;
                background:  variaveis.$cor-sextuplo;
                color: #fff;
                border-radius: 66px;
                font-size: 1.5rem;
                cursor: pointer;
                font-family: variaveis.$ft-titulos;
                border: none;
                outline: none;
                &:hover {
                    border: 1px solid #888fb4;
                    color: variaveis.$cor-quintupla;
                    background:variaveis.$cor-default;
                    width: 282px;
                }
            }
        }
        .img-home{
            max-width: 474px;
            img{
                width: 100%;
            }

        }
    }

}

_variaveis.scss/abstract

// Variáveis
// Cores
$cor-primaria: #0C0421;
$cor-secundaria: #4e75ff;
$cor-terciaria: #85A0ff;
$cor-quaternaria: #E8F5C8;
$cor-quintupla: #fff;
$cor-sextuplo: #85A0ff;
$cor-default: #bcc6eb;
$gradiente-primario: linear-gradient(180deg, #E8F5C8 0%, #FFFFFF 96.87%);
$gradiente-secundario: linear-gradient(180deg, rgba(130, 214, 175, 0.7) 10%, rgba(202, 212, 250, 0.3) 10%);
//Fontes
$ft-textos: 'Montserrat', sans-serif;
$ft-titulos: 'Krona One', sans-serif;

styles.scss/styles

@use './abstract/root';

@use './componentes/header.scss';
1 resposta

Oi

Pelo o que vi tudo tá certo, ja viu se o arquivo header.scss tá sendo importado corretamente no arquivo styles.scss? Pelo que vi, você está usando @use './componentes/header.scss';, olha se o caminho pra o arquivo header.scss tá correto

ah também olha se .btn-main tá sendo usada no elemento correto no teu HTML, pode ta escrito diferente e tal