Tutorial de animación de borde de botón

Introducción

En este laboratorio, exploraremos cómo crear una animación de borde de botón al pasar el cursor por encima utilizando CSS. Al utilizar los pseudo-elementos ::before y ::after, podemos agregar dos cajas arriba y abajo del botón y transicionar su ancho a 100% al pasar el cursor por encima. Este laboratorio te ayudará a mejorar tus habilidades en CSS y agregar interactividad a tus páginas web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Animación de borde de botón

index.html y style.css ya se han proporcionado en la VM.

Para crear una animación de borde al pasar el cursor por encima, puedes utilizar los pseudo-elementos ::before y ::after para generar dos cajas que tengan un ancho de 24px y estén posicionadas arriba y abajo de la caja. Luego, aplica la pseudo-clase :hover para aumentar el ancho de esos elementos a 100% al pasar el cursor por encima y animar la transición utilizando transition.

Aquí hay un fragmento de código de ejemplo:

<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%;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Animación de borde de botón. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.