Crea animaciones de relleno de botones cautivadoras con CSS

Introducción

En este laboratorio, aprenderemos cómo crear una animación de relleno al pasar el cursor sobre un botón utilizando CSS. Utilizaremos la pseudo-clase :hover para cambiar el fondo y el color del botón cuando el usuario lo posiciona el cursor sobre él, y también agregaremos un efecto de transición para animar los cambios. Al final de este laboratorio, serás capaz de mejorar la experiencia del usuario en tu sitio web agregando efectos de pasar el cursor atractivos a tus botones.

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 relleno del botón

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

Para crear una animación de relleno al pasar el cursor, puedes establecer las propiedades color y background y aplicar una transición adecuada para animar los cambios. Para desencadenar la animación al pasar el cursor, utiliza la pseudo-clase :hover para cambiar las propiedades background y color del elemento. Aquí hay un fragmento de código de ejemplo:

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

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 relleno del botón. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.