class =

Tudo bem gente? espero que sim!!! estou com dificuldades para entender o porque o a class que criei não funciona da mesma maneira que a da aula!!! Na aula 3 de quias de estilos css, é orientado a criar um botao transparente, porém, aqui o só está sendo identifcado a primeira class que é a botao, e não está usando a segunda!

Uso o firefox como navegador principal, testei pelo google chrome, e não funcionou..... Utilizo a ultima versão do visual studio code e as mesmas extensões que solicitadas no veideo.

no index creio que está tudo correto, pois segui conforme apresenta na aula!

<!DOCTYPE html>
<html lang="pt-br">
<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="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Elsie+Swash+Caps:wght@900&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="Assets/css/base/base.css">
    <link rel="stylesheet" href="Assets/css/componentes/botoes.css">
    <title>Home | Casa Verde</title>
</head>
<body>
    <main class="container">
        <button class="botao">Assinar Newsletter</button>

        <button class="botao botao--alternativo">Adicionar ao carrinho</button>
    </main>
</body>
</html>

------ já no css de botões, ele só usa a class botao ( ou seja o primeiro ), ele não identifica o segundo!!! o botao nao fica transparente que nem na aula, só fica preenchido com as configurações do primeiro! --------

.botao{
    background-color: var(--amarelo);
    text-align: center;
    font-family: inherit;
    font-weight: 700;
    color: var(--branco);
    width: 100%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    box-shadow: 10px 10px 30px #FFCB473d;
    border: none;
}

.botao--alternativo{
    color: var(--amarelo);
    background-color: unset;
    box-shadow: none;
    border: 1px solid var(--amarelo);
}

os demais arquivos:

base:

@import url(_variaveis.css);
@import url(_reset.css);

body{
    font-family: var(--tamanho-corpo);
    font-size: var(--tamanho-corpo);
    background: url(../../Img/fundo-textura.png) ,url(../../Img/fundo-linhas.png);
    background-position: center;
}

.container{
    padding-right: 1rem;
    padding-left: 1rem;
}

vars:

:root{
    --amarelo: #ffcb47;
    --branco: #ffffff;
    --cinza: #909090;
    --preto: #202020;

    --familia-corpo: 'Montserrat', sans-serif;
    --tamanho-corpo: 1rem;
}

agradeço desde já, por qualquer ajuda!!! gosto muito dos cursos! valeu!!!!

Fala Richard! Tudo tranquilo? Eu estou ótimo :)

Então, uma das regras do css para aplicar estilos, é a especifidade, que diz quanto mais especifico você for, mais "garantido" será de que o estilo escolhido será aplicado. Vamos há alguns exemplos:

button {
    width: 50px;
    height: 30px;
    color: blue;
}

button.vermelho {
    width: 50px;
    height: 30px;
    color:  red;
}

Nesse caso mostrado acima, o primeiro seletor que é somente o button, está menos especifico que o de baixo, pois o segundo seletor especifica que quer um botão com a classe vermelho, e o outro apenas diz que quer selecionar um botão. Então logo o estilo que será aplicado é o que está sendo mais especifico, que nesse caso é o segundo. E é isso que está acontecendo no seu caso, você não esta sendo especifico. Você pode usar por exemplo:

botao.botao--alternativo
button.botao--alternativo

Provavelmente esse seja o problema de não ter aplicado o estilo, tanto que se você inspecionar o elemento verá algo parecido com isso:

Que significa que esse estilo foi substituido por algum outro.

Espero ter te ajudado, tenha uma ótima noite :)