Efecto hover
Lección 7 de 8 del curso Proyecto de CSS: Botón elegante de Coddy.
¡Hagamos algún efecto cuando se pase el cursor sobre el botón!
Para cambiar el botón al pasar el cursor usamos la pseudo-clase :hover,
.fancyButton:hover {
background-color: red;
}¡En el ejemplo anterior nuestro botón se pondrá rojo una vez que se pase el cursor sobre él!
Para que la transición sea suave, usa:
.fancyButton {
...
transition: all 0.2s;
}Puedes jugar con el tiempo de transición (0.2s).
Desafío
Fácil¡Añade un efecto hover a tu botón, haz que quede genial!
Tareas requeridas:
- Añade la propiedad transition a tu botón, con la duración que elijas, menor o igual a 1 segundo.
- Añade
opacity: 0.8;al efecto hover de tu botón.
Propiedades opcionales y sugeridas para cambiar al pasar el ratón (hover):
- sombras (
box-shadow) - color de fondo
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
</body>
</html>