LabEx
EntrarJunte-se

Animação de Preenchimento em Botão

Beginner

This tutorial is from open-source community. Access the source code

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.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

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.