Entrar Ainda não tem acesso?
2
respostas

Olá, por que colocamos o transition no elemento .enviar ao invés do .enviar:hover? isto dentro do CSS Obrigado

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo CSS avançado e atividade Transição com duração

por Márcio Eli Ribeiro Junior
| 50.1k xp | 8 posts

.enviar{ width: 40%; padding:15px 0; color: white; background: orange; font-weight: bold; font-size: 18px; border: none; border-radius: 5px; transition: 1s; background; cursor: pointer; }

.enviar:hover{ background: darkorange;

}

2 respostas
por Samuel Gomes Rosa
| 72.1k xp | 17 posts
Desenvolvedor Front-end

Fala Márcio!

A partir do momento em que usamos o transition no elemento com :hover, a transição de volta ao estado original do elemento sem :hover será bruta/grossa, e não uma transição mais suave.

Para uma melhor compreensão, teste o código abaixo e troque o transition do button para o button:hover para você perceber a diferença:

HTML

<button>Aperte-me!</button>

CSS

button {
  width: 120px;
  height: 60px;
  background: red;
  color: white;
  transition: 4s;
}

button:hover {
  background: blue;
}
por Márcio Eli Ribeiro Junior
| 50.1k xp | 8 posts

Boa noite Samuel, executei o código, entendi o que falou, obrigado!