Solucionado
Por que inserir o transition no seletor .enviar e não no seletor .enviar:hover?
.enviar {
width: 40%;
padding: 15px 0;
background: orange;
color: white;
font-weight: bold;
font-size: 18px;
border: none;
border-radius: 5px;
transition: 1s background;
}.enviar:hover {
background: darkorange;
transition: 1s background;
}Testei das duas formas e funcionaram fazendo a mesma alteração visual no botão.
Bom dia, Rafael!
Digamos que você declarasse uma .enviar:active
.enviar:active {
background: darkblue;
}Caso o seu transition estivesse dentro da função seria necessário declara-la também na função .enviar:active
Porém estando dentro da .enviar você economiza uma essa declaração, deixando seu código mais semântico e prático.
Espero ter ajudado!
Olá Rafael, tudo certo?
Se você colocar o transition no '.enviar', a animação do transition acontece quando você coloca o mouse em cima do botão E quando você tira o mouse de cima do botão.
Caso coloque o transition apenas no '.enviar', a animação acontece apenas quando você coloca o mouse em cima do botão, mas quando você tira o mouse de cima dele não acontece animação nenhuma.
Deu pra entender? Espero que sim :)
Bons estudos!