Efecto Hover con CSS: Como Agrandar Cualquier Elemento HTML al Pasar el Cursor
¿Qué es el efecto hover?
El efecto hover es una técnica en CSS que permite aplicar un estilo especial a un elemento cuando el usuario coloca el cursor sobre él. Este efecto se utiliza comúnmente para mejorar la interactividad de una página web, haciendo que los elementos respondan visualmente al movimiento del cursor. Por ejemplo, puedes hacer que un botón cambie de color, muestre un borde, o incluso se agrande cuando el usuario lo señala con el cursor.
¿Qué es la propiedad scale?
La propiedad scale en CSS es una función que permite modificar el tamaño de un elemento, escalándolo hacia arriba o hacia abajo en uno o ambos ejes (horizontal y vertical). Esta propiedad es parte de la función transform, y se utiliza para agrandar o reducir un elemento de manera proporcional o personalizada. La escala se controla mediante un valor numérico: un valor de 1 mantiene el tamaño original, un valor superior a 1 lo agranda, y un valor inferior a 1 lo reduce.
Ejemplo:
1. Creamos un archivo html para generar la estructura y crear un etiqueta de boton la cual tendra el efecto.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilo.css"> <!--elemento HTML para definir la relación entre el documento html y la hoja de estilo CSS-->
<title>Document</title>
</head>
<body>
<button class="boton">SELECCIONAR</button>
</body>
</html>
2. Creamos un archivo css para aplicar los efectos necesarios.
estilo.css
.boton{
background-color: aqua;
padding: 6px;
transition: transform 0.4s;
border: 0;
border-radius: 35px;
}
.boton:hover{
transform: scale(1.1);
cursor: pointer;
}
3. Listo, probamos la pagina en un navegador y pasamos el cursor sobre el boton y se aplicara el efecto.
Descargar proyecto Tutorial youtube