Tutorial de Animação de Borda em Botão com CSS

Introdução

Neste laboratório, exploraremos como criar uma animação de borda em um botão ao passar o mouse (hover) usando CSS. Ao utilizar os pseudo-elementos ::before e ::after, podemos adicionar duas caixas acima e abaixo do botão e transicionar sua largura para 100% ao passar o mouse. Este laboratório ajudará você a aprimorar suas habilidades em CSS e adicionar interatividade às suas páginas web.

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 Borda em Botão

index.html e style.css já foram fornecidos na VM (Virtual Machine).

Para criar uma animação de borda ao passar o mouse (hover), você pode usar os pseudo-elementos ::before e ::after para gerar duas caixas com 24px de largura e posicionadas acima e abaixo da caixa. Em seguida, aplique a pseudo-classe :hover para aumentar a width (largura) desses elementos para 100% ao passar o mouse e anime a transição usando transition.

Aqui está um trecho de código de exemplo:

<button class="animated-border-button">Submit</button>

.animated-border-button {
  background-color: #263059;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}

.animated-border-button::before,
.animated-border-button::after {
  border: 0 solid transparent;
  transition: all 0.3s;
  content: "";
  height: 0;
  position: absolute;
  width: 24px;
}

.animated-border-button::before {
  border-top: 2px solid #263059;
  right: 0;
  top: -4px;
}

.animated-border-button::after {
  border-bottom: 2px solid #263059;
  bottom: -4px;
  left: 0;
}

.animated-border-button:hover::before,
.animated-border-button:hover::after {
  width: 100%;
}

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