Skip to main content
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.

Leave a Reply