Crie uma Animação de Crescimento de Botão Cativante com CSS

Introdução

Neste laboratório, aprenderemos como criar um botão com uma animação de crescimento ao passar o mouse (hover) usando CSS. Este efeito pode ser usado para adicionar interatividade e interesse visual a um site ou aplicação. Ao aplicar a propriedade transform e a pseudo-classe :hover, podemos fazer com que o botão aumente de tamanho quando o usuário passa o mouse sobre ele, criando uma animação sutil, mas eficaz.

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 Crescimento do Botão

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

Para criar uma animação de crescimento ao passar o mouse (hover), você pode usar uma transition apropriada para animar as mudanças no elemento. Use a pseudo-classe :hover para alterar a propriedade transform para scale(1.1). Isso fará com que o elemento cresça quando o usuário passar o mouse sobre ele.

Aqui está um trecho de código de exemplo que você pode usar:

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

.button-grow {
  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-grow:hover {
  transform: scale(1.1);
}

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