0

estou fazendo um projeto onde estou criando vários estilos de botões diferentes, criei botões com nomes de classe como "button-default", "button-default-empty". O problema é que não consigo fazer com que o css da primeira classe seja aplicado nas demais, também não consigo alterar a propriedade a:hover dessas classes.

.button-default{
    background-color: #49bf9d;
    border: 2px solid #49bf9d;
    color: white;
    padding: .75em 1.5em;
    border-radius: 5px;
    font-size: .9em;
}

.button-default-empty{
    background-color: white;
    border: 2px solid #efefef;
    color: inherit;
}

.button-default-empty a:hover{
    color:#49bf9d;
    background-color: #49bf9d; 

}
  <label for="nome">Nome</label>
  <textarea name="mensagem" id="mensagem"></textarea>    
  <input class="button-default" type="submit" value="Enviar">
  <a href="#" title="limpar" class="button-default-empty">Limpar</a>

2
  • Você precisa especificar melhor seu problema, o estilo está sendo aplicado corretamente. O seu hover não está funcionando porque o correto seria: .button-default-empty:hover. 31/01/2019 às 21:31
  • na verdade estou fazendo um curso de font-end e nesse curso o professor criou essas 2 classes, a diferença no porjeto dele a segunda classe herdou todas as definições da primeira só alterando o que foi adicionado na segunda classe, tentei fazer da mesma forma mas como pode ver não funcionou
    – Reignomo
    31/01/2019 às 21:35

1 Resposta 1

0

"- não consigo fazer com que o css da primeira classe seja aplicado nas demais"

Isso tá meio confuso. Se você quer que um elemento seja estilizado "com as duas classes", basta definir as duas classes no elemento:

.button-default{
    background-color: #49bf9d;
    border: 2px solid #49bf9d;
    color: white;
    padding: .75em 1.5em;
    border-radius: 5px;
    font-size: .9em;
}

.button-default-empty{
    background-color: white;
    border: 2px solid #efefef;
    color: inherit;
}
        <input class="button-default" type="submit" value="button-default">
        <input class="button-default-empty" type="submit" value="button-default-empty">
        <input class="button-default button-default-empty" type="submit" value="button-default + button-default-empty">


"- não consigo alterar a propriedade a:hover dessas classes"

Basta adicionar o :hover direto na classe:

.button-default-empty{
    background-color: white;
    border: 2px solid #efefef;
    color: inherit;
}
.button-default-empty:hover{
    color:#49bf9d;
    background-color: #49bf9d;
}
<input class="button-default-empty" type="submit" value="button-default-empty">

Repare que em momento algum eu informei a tag do elemento. Sendo assim, qualquer elemento que você definir com essas classes serão estilizadas com essas propriedades.

Repare essa declaração:

.button-default-empty a:hover {
    color:#49bf9d;
    background-color: #49bf9d;
}

Você define que qualquer elemento a que seja filho de qualquer elemento com classe button-default-empty (não importa o nível) seja estilizado no evento :hover. Veja funcionando:

.button-default-empty a:hover {
    color:#49bf9d;
    background-color: #49bf9d;
}
<div class="button-default-empty">
    <a href="#">Um link filho da classe button-default-empty</a>
    <div>
        <div>
            <a href="">Um outro link, digamos que, filho da classe button-default-empty</a>
        </div>
    </div>
</div>


Leitura recomendada: Seletores CSS

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .