Introdução
Neste laboratório, aprenderemos como criar uma animação de preenchimento (fill animation) ao passar o mouse (hover) sobre um botão usando CSS. Usaremos a pseudo-classe :hover para alterar o background e a color do botão quando o usuário passar o mouse sobre ele, e também adicionaremos um efeito de transição para animar as mudanças. Ao final deste laboratório, você será capaz de aprimorar a experiência do usuário em seu site, adicionando efeitos de hover envolventes aos seus botões.
Animação de Preenchimento (Fill Animation) em Botão
index.html e style.css já foram fornecidos na VM.
Para criar uma animação de preenchimento (fill animation) ao passar o mouse (hover), você pode definir as propriedades color e background e aplicar uma transition apropriada para animar as mudanças. Para acionar a animação ao passar o mouse, use a pseudo-classe :hover para alterar as propriedades background e color do elemento. Aqui está um exemplo de trecho de código:
<button class="animated-fill-button">Submit</button>
.animated-fill-button {
padding: 20px;
background: #fff;
color: #000;
border: 1px solid #000;
cursor: pointer;
transition: 0.3s all ease-in-out;
}
.animated-fill-button:hover {
background: #000;
color: #fff;
}
Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.
Resumo
Parabéns! Você concluiu o laboratório de Animação de Preenchimento (Button Fill Animation). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.