Estou trabalhando em um projeto da web e quero adicionar efeitos suaves de foco aos elementos da minha página da web usando transições CSS. Especificamente, gostaria de alterar a cor de fundo e a cor do texto de um botão quando um usuário passa o mouse sobre ele.
Aqui está o que tenho até agora em meu código CSS:
.button {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.button:hover {
background-color: #2980b9;
color: #fff;
}
Embora isso funcione, a transição entre os estados original e de foco é abrupta. Como posso criar um efeito de transição mais suave, para que a mudança de cor pareça gradual e fluida? Eu apreciaria se você pudesse fornecer orientação sobre como usar transições CSS para obter esse efeito de foco suave, incluindo quaisquer propriedades e valores CSS necessários. Obrigado pela ajuda!
