conflito button:hover e button:active

[SonikPlay 5]

[spoiler=css]button {

font-family: Arial;

font-size: 14px;

color: white;

padding: 7px 15px;

background-color: black;

border-radius: 6px;

border: 1px solid grey;

}

 

button:active {

transition: 0s;

text-shadow: 1px 3px 4px black;

color: black;

background-color: orange; (2)sobre esta aqui

}

 

button:hover {

background-color: #FF1493; (1)essa cor está prevalecendo...

transition: .3s;

font-size: 20px;

}

 

 

Ao clicar a cor de fundo não muda, sendo direto.

E quando clica, a sombra também está demorando para aparecer, este efeito também queria que fosse imediato, porém o hover "manda" no active.

 

---

 

Queria entender o porque disto e como arrumar e-e

[FrontD 2]

Bom, vamos lá a pseudo classe :hover so vai ter efeito enquanto você passa o mouse sobre o elemento, e o :active só vai acontecer quando o item estiver ativo ou seja quando ele for clicado. Se esse era realmente o efeito que você queria você pode adicionar um "!important" na cor laranja ficando igual o código a baixo.

[spoiler=Código]

button {

 

font-family: Arial;

font-size: 14px;

color: white;

padding: 7px 15px;

background-color: black;

border-radius: 6px;

border: 1px solid grey;

}

 

button:active {

transition: .0s;

text-shadow: 1px 3px 4px black;

color: black;

background-color: orange!important; (2)!sobre esta aqui

}

 

button:hover {

background-color: #FF1493; (1)!não está mais

transition: .3s;

font-size: 20px;

}

 

 

 

 

 

Animação ficará da seguinte maneira, botão é por padrão preto, mas quando existe um :hover ou seja quando passar o mouse sobre ele o botão vai ficar rosa e quando você clicar nele a pseudo classe :active vai entrar em ação tornando ele laranja, qualquer dúvida manda ae