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.