Comercial button

Dentro de Energy, el CTA Comercial está orientado a eventos de conversión. Su objetivo es guiar a la persona hacia el siguiente paso importante dentro de la experiencia: completar una compra, confirmar un servicio, iniciar un registro...

Se caracteriza por tener un look & feel específico, utilizando el color de acento de nuestra identidad como llamada de atención, para destacar frente a otros elementos de la interfaz y motivar la interacción.

Existen dos tamaños disponibles: el tamaño default y una versión más pequeña, pensada para contextos con espacio reducido, como tablas o listados.

El componente cuenta con distintas variantes que representan los diferentes estados en los que puede encontrarse:

Este componente ofrece unas opciones de configuración muy sencillas. La personalización principal consiste en decidir si se quiere usar un icono junto al texto del botón y, en ese caso, elegir su posición: a la izquierda o a la derecha del label.

Las animaciones no solo aportan dinamismo visual, sino que también refuerzan la comprensión del usuario: ofrecen una respuesta inmediata, dan sensación de fluidez y hacen que la interfaz se sienta más viva y cuidada.

Hover

Cuando el usuario pasa el cursor sobre un botón, se activa una animación que muestra una curva ascendente animada. Esta curva comienza desde la parte inferior del botón y se expande hacia arriba hasta cubrirlo completamente, generando un efecto visual envolvente que refuerza la idea de interacción inminente.