Usa el Vista Previa de Efectos al Pasar el Ratón gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Para qué sirven los efectos al pasar el ratón
Un efecto al pasar el ratón es un pequeño cambio visual cuando el ratón descansa sobre un elemento: un botón se eleva, brilla, se llena de color, crece ligeramente o gana una sombra. Su trabajo es dar respuesta. Le dice al usuario que este elemento es interactivo antes de que pulse sobre él. Sin respuesta al pasar el ratón, los botones y las tarjetas pueden parecer texto plano o decoración, y los usuarios dudan. Con ella, la interfaz se siente viva y receptiva, porque cada elemento responde al ratón. La herramienta de arriba te permite probar seis efectos en un botón y una tarjeta, y copiar el CSS del que te guste.
Los efectos al pasar el ratón son pequeños por diseño. Los mejores se notan de pasada, no se estudian. Una elevación de unos pocos píxeles, una sombra suave o un relleno de color basta. Los saltos grandes, los colores estridentes y las transiciones lentas se sienten artificiales y ralentizan la interfaz. Los efectos de la herramienta son deliberadamente moderados: cambian en un cuarto de segundo, se mueven solo unos pocos píxeles y mantienen el texto legible en cada etapa. Esa moderación es lo que los hace utilizables en un sitio real.
Cómo usar la vista previa
Elige un efecto de la lista y luego mueve el ratón sobre el botón y la tarjeta. Elevar levanta el elemento y añade una sombra, lo que sugiere que se puede pulsar. Brillo añade un anillo suave y un fondo claro, lo que conviene a acciones principales que quieres destacar. Relleno inunda el botón de color y vuelve el texto blanco, lo que es audaz y claro. Ampliar agranda el elemento ligeramente, lo que atrae la mirada pero puede desplazar el diseño cercano si se usa en exceso. Subrayado añade una línea de color debajo, lo que conviene a enlaces de texto. Sombra profunda añade una sombra más fuerte y una elevación pequeña, lo que conviene a tarjetas.
Tiempo y transiciones
Cada efecto de la herramienta usa una transición de un cuarto de segundo. Esa duración es un punto ideal: lo bastante rápida para sentirse instantánea, lo bastante lenta para sentirse suave. Las transiciones más cortas, de menos de 100 milisegundos, se sienten bruscas. Las transiciones más largas, de más de 500 milisegundos, se sienten lentas, sobre todo cuando el usuario mueve el ratón rápidamente sobre muchos elementos. Si editas el CSS copiado, mantén la transición entre 150 y 300 milisegundos para la respuesta al pasar el ratón.
El problema de las pantallas táctiles
El hover solo existe con un ratón. En teléfonos y tabletas no hay hover, así que un efecto hover nunca se reproduce, o se reproduce de forma extraña al tocar. Eso significa que el hover nunca debe transmitir información importante. No ocultes la etiqueta de un botón, el precio o la acción detrás de un efecto hover. No hagas que el detalle clave de una tarjeta aparezca solo al pasar el ratón. El estado normal ya debe estar completo y ser legible, y el estado hover solo debe añadir énfasis.
Prueba tu diseño con el ratón desconectado, o en un teléfono, y pregunta si todo sigue funcionando. Si una tarjeta solo revela su botón al pasar el ratón, un usuario de teléfono nunca podrá alcanzar ese botón. Si un botón solo muestra su significado al pasar el ratón, un usuario táctil nunca lo aprenderá. La solución es simple: muestra siempre el contenido importante, y deja que el hover sea un extra para usuarios de ratón. La herramienta de vista previa no puede probar el tacto por ti, pero la regla es fácil de recordar: el hover realza, nunca explica.
Usuarios de teclado y estados de foco
Los usuarios de teclado navegan con Tab, no con un ratón, así que nunca activan el hover. Activan el foco, y tu estilo de foco debe ser al menos tan claro como tu estilo hover. Añade una regla de foco visible, como un contorno o el mismo brillo que el efecto hover, para que los usuarios de teclado puedan ver dónde están. Los navegadores ofrecen un contorno por defecto, pero muchos diseños lo eliminan sin reemplazarlo, lo que deja perdidos a los usuarios de teclado. Nunca elimines el contorno a menos que ofrezcas un estilo de foco igual de claro.
Preguntas frecuentes
¿Qué efecto hover debo elegir? Elevar o sombra profunda para tarjetas, relleno o brillo para botones principales, subrayado para enlaces de texto. Elige uno por tipo de elemento y úsalo de forma coherente en todo el sitio.
¿Por qué mi efecto hover se siente lento? Probablemente la transición es demasiado larga. Mantenla entre 150 y 300 milisegundos, y anima transform y shadow, que son baratos, en lugar de propiedades de diseño.
¿Funcionan los efectos hover en el móvil? No, no de forma fiable. Nunca ocultes contenido importante detrás del hover, y ofrece siempre un estilo de foco claro también para usuarios de teclado.
Prueba los efectos arriba, elige una familia para tu sitio y copia el CSS. Una respuesta hover pequeña y coherente hace que una interfaz se sienta cuidada sin gritar nunca sobre ello.
Herramientas relacionadas
- Hover Effect Preview (English version)
- Vista Previa de Cargadores Esqueleto
- Vista Previa de Texto Deslizante
Pingback: Hover Effect Preview - Try Button Hover States Live