Ejemplo para cambiar el cursor al pasar sobre un elemento en CSS

El cursor del mouse es una parte fundamental de la experiencia del usuario en la web. Cambiar el estilo del cursor al pasar sobre un elemento puede proporcionar pistas visuales que mejoran la interacción y la usabilidad de tu sitio. En este artículo, aprenderemos a cambiar el cursor al pasar sobre un elemento usando CSS.

¿Por Qué Cambiar el Cursor?

Cambiar el cursor puede ayudar a indicar que un elemento es interactivo, como un botón o un enlace. También puede mejorar la estética general de tu sitio web y hacer que la navegación sea más intuitiva para los usuarios. Por ejemplo, al cambiar el cursor a una mano al pasar sobre un botón, le dices al usuario que puede hacer clic en él.

Tipos de Cursores en CSS

CSS proporciona varios tipos de cursores que puedes utilizar. Algunos de los más comunes son:

default: El cursor por defecto.
pointer: Un cursor de mano, ideal para elementos clicables.
text: Un cursor de texto que indica que el texto se puede seleccionar.
move: Un cursor que indica que el elemento se puede mover.
help: Un cursor que muestra un signo de interrogación, indicando ayuda.

Implementación

A continuación, te mostraremos cómo cambiar el cursor utilizando CSS. Vamos a crear un ejemplo simple con un botón.

HTML

Primero, vamos a definir nuestro HTML. Aquí tenemos un botón al que le aplicaremos el cambio de cursor.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Cambiar Cursor en CSS</title>
</head>
<body>
    <button class="custom-cursor">¡Haz clic aquí!</button>
</body>
</html>

CSS

Ahora, pasemos al CSS. Aquí definiremos el estilo del botón y cambiaremos el cursor al pasar el mouse sobre él.

css
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.custom-cursor {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer; /* Cambia el cursor a mano */
    transition: background-color 0.3s ease;
}

.custom-cursor:hover {
    background-color: #0056b3; /* Cambia el color de fondo al pasar el cursor */
}

Explicación del Código

HTML: Creamos un botón con la clase custom-cursor.
CSS:
- Establecemos estilos básicos para el botón, incluyendo color, tamaño y fondo.
- Usamos cursor: pointer; para cambiar el cursor a una mano cuando el usuario pasa el mouse sobre el botón.
- También aplicamos una transición en el cambio de color para darle un efecto suave al interactuar con el botón.

Resultado Final

Cuando cargues esta página en un navegador, verás un botón que, al pasar el cursor sobre él, cambia a una mano, indicando que es clicable. Al hacer clic, puedes agregar funcionalidad adicional utilizando JavaScript o enlazar a otra página.

Conclusión

Cambiar el cursor al pasar sobre un elemento es una técnica simple pero efectiva que puede mejorar la usabilidad de tu sitio web. Con solo unas pocas líneas de CSS, puedes guiar a los usuarios en su navegación y hacer que tu sitio se sienta más interactivo. Prueba diferentes estilos de cursor y diviértete experimentando con tus diseños web.

Buscar este blog

Vía Electrónica