Tutorial de Animação de Encolhimento de Botão em CSS

Introdução

Neste laboratório, exploraremos como criar uma animação de encolhimento de botão usando CSS. O objetivo deste laboratório é ajudá-lo a entender como usar a pseudo-classe :hover e a propriedade transition para criar uma animação suave e visualmente atraente quando um usuário passa o mouse sobre um botão. Ao final deste laboratório, você terá uma boa compreensão de como criar animações simples, mas eficazes, usando CSS.

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 92%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Animação de Encolhimento de Botão

index.html e style.css já foram fornecidos na VM.

Para criar uma animação de encolhimento ao passar o mouse (hover) sobre um elemento, você pode usar uma propriedade transition apropriada para animar as mudanças e a pseudo-classe :hover para acionar a animação. Por exemplo, se você deseja encolher um botão com a classe button-shrink quando um usuário passa o mouse sobre ele, você pode adicionar o seguinte CSS:

.button-shrink {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
  transform: scale(0.8);
}

Isso aplicará um efeito de transição a todas as propriedades do botão quando houver uma mudança, e quando o usuário passar o mouse sobre ele, o botão encolherá para 80% de seu tamanho original. O código HTML para o botão é o seguinte:

<button class="button-shrink">Submit</button>

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 Encolhimento de Botão. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.