Mundo Web

Botón de información con diálogo animado en css

Hola, ya hacía tiempo que no publicaba nada, pero vuelvo con un pequeño aporte para vuestros diseños UX/UI.

Esta vez lo hago porque me ha tocado hacer un botón de información que pasase a un aspa de cierre y aunque es algo muy sencillo, no lo encontré por ningún sitio, así que me he visto obligado a hacer algo rápido, con esto de los sprints son todo prisas…

He añadido un diálogo que abre y cierra con un efecto bounce, todo ello en puro CSS para haceros la vida más fácil a vosotros y a los navegadores 🙂

Ver en CodePen Hover Effect by Daniel Villalba (@danielvillalba).dark

 
Podéis personalizarlo a vuestro gusto y sois libres de incorporarlo a vuestros proyectos. Eso sí, las medidas del diálogo que se abre al clickar en el botón de información, en este caso son absolutas y deberéis adecuarlas según vuestras necesidades.

Siento no tener tiempo a mejorar la integración si bien vais a tener que tocar muy poco.

Ahhh! y no seas egoist@, comparte y quizás me plantee realizar un buen curso para convertiros en maestr@s de las microinteracciones con CSS y JavaScript.

Anímate a comentar

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.