Crea una cautivadora animación de crecimiento de botón con CSS

Introducción

En este laboratorio, aprenderemos cómo crear un botón con una animación de crecimiento al pasar el cursor sobre él utilizando CSS. Este efecto se puede utilizar para agregar interactividad y atractivo visual a un sitio web o aplicación. Al aplicar la propiedad transform y la pseudo-clase :hover, podemos hacer que el botón se agrande cuando el usuario pasa el cursor sobre él, creando una animación sutil pero efectiva.

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 crecimiento de botón

index.html y style.css ya se han proporcionado en la máquina virtual (VM).

Para crear una animación de crecimiento al pasar el cursor sobre un elemento, puedes utilizar una transition adecuada para animar los cambios en el elemento. Utiliza la pseudo-clase :hover para cambiar la propiedad transform a scale(1.1). Esto hará que el elemento crezca cuando el usuario pase el cursor sobre él.

A continuación, se muestra un ejemplo de fragmento de código que puedes utilizar:

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

Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para ver una vista previa de la página web.

Resumen

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