Ejemplo para hacer un efecto hover en botones o enlaces en CSS

El efecto hover en CSS es uno de los recursos más comunes para mejorar la interacción de los usuarios con una página web. Con hover, podemos cambiar el estilo de un botón o enlace cuando el usuario pasa el cursor sobre él, dándole un aspecto más atractivo y profesional.

En este artículo, aprenderemos a aplicar un efecto hover a un botón o enlace utilizando solo CSS. Veremos varios ejemplos, desde el cambio de color hasta efectos avanzados como sombras y transiciones.

1. ¿Qué es el efecto hover en CSS?

En CSS, el pseudo-clase :hover permite aplicar estilos adicionales a un elemento cuando el cursor del usuario está sobre él. Se usa generalmente en botones y enlaces para indicar que el elemento es interactivo. El efecto hover hace que los elementos se sientan más vivos y responden a la interacción del usuario.

2. Ejemplo básico: Cambiar el color de un botón con hover

Primero, veamos el ejemplo más sencillo: cambiar el color de fondo de un botón cuando el usuario pasa el mouse por encima.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botón Hover Básico</title>
    <style>
        /* Estilo del botón */
        .boton {
            background-color: #4CAF50; /* Verde */
            color: white;
            padding: 15px 32px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s; /* Suaviza el cambio */
        }

        /* Efecto hover */
        .boton:hover {
            background-color: #45a049; /* Verde oscuro */
        }
    </style>
</head>
<body>
    <button class="boton">Pasa el mouse sobre mí</button>
</body>
</html>

Explicación:

Usamos .boton:hover para aplicar el cambio de color al botón cuando el cursor está sobre él.
La propiedad transition permite que el cambio de color se realice de forma gradual, en este caso en 0.3s.

3. Cambiar el color de texto en enlaces con hover

También es común que los enlaces cambien de color para indicar que pueden ser clickeados.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enlace Hover Básico</title>
    <style>
        /* Estilo del enlace */
        .enlace {
            color: #0066cc; /* Azul */
            text-decoration: none;
            font-size: 18px;
            transition: color 0.3s;
        }

        /* Efecto hover */
        .enlace:hover {
            color: #ff6600; /* Naranja */
        }
    </style>
</head>
<body>
    <a href="#" class="enlace">Visita nuestro sitio</a>
</body>
</html>

Explicación:

La propiedad text-decoration: none; elimina el subrayado del enlace.
Con color en el efecto hover, cambiamos el color del texto cuando el usuario coloca el mouse sobre el enlace.

4. Efecto de sombra con hover

Agregar una sombra al botón al hacer hover es otra forma de hacerlo más atractivo. Esto da la impresión de que el botón se "levanta" al pasar el cursor sobre él.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botón Hover con Sombra</title>
    <style>
        .boton-sombra {
            background-color: #3498db; /* Azul */
            color: white;
            padding: 15px 32px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            transition: box-shadow 0.3s;
        }

        .boton-sombra:hover {
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* Sombra */
        }
    </style>
</head>
<body>
    <button class="boton-sombra">Pasa el mouse sobre mí</button>
</body>
</html>

Explicación:

La propiedad box-shadow aplica una sombra bajo el botón cuando el usuario coloca el cursor sobre él, agregando profundidad.

5. Efecto hover con escala

Podemos hacer que el botón crezca ligeramente cuando el cursor está sobre él usando transform: scale().

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botón Hover con Escala</title>
    <style>
        .boton-escala {
            background-color: #e74c3c; /* Rojo */
            color: white;
            padding: 15px 32px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .boton-escala:hover {
            transform: scale(1.1); /* Escala del 110% */
        }
    </style>
</head>
<body>
    <button class="boton-escala">Pasa el mouse sobre mí</button>
</body>
</html>

Explicación:

transform: scale(1.1) aumenta el tamaño del botón en un 10% al pasar el cursor, creando un efecto de acercamiento.

Conclusión

Los efectos hover en botones y enlaces pueden mejorar considerablemente la experiencia de usuario y la apariencia de una página web. Hay muchas variaciones y combinaciones de hover que se pueden usar para que los elementos interactivos sean visualmente atractivos y fáciles de usar.

Buscar este blog

Vía Electrónica