Back to Insights

Botón CTA · Diseño de interfaces

Botones de llamada a la acción: dar al clic principal su propia gravedad

Demostración de Event Horizon, un botón de llamada a la acción que curva la página.

Demostración de Event Horizon, un botón de llamada a la acción que curva la página.

Event Horizon — el clic que curva la página

Media source

El botón de llamada a la acción es aquel en torno al cual se construye toda una página. Pide el único clic que importa. Sin embargo, la mayoría se parecen: una píldora brillante, un verbo corto, una flecha al final.

Inspirados en Beautiful UI, una biblioteca de componentes de interfaz del estudio Turbo, quisimos dar un peso real a ese clic. Así que el botón es el propio agujero negro: una píldora de negro puro cuyo borde es un horizonte de sucesos. Una luz cálida fluye a su alrededor en finos filamentos, lentamente, incluso en reposo.

Pasa el cursor por encima y el horizonte despierta. Todo el botón tira de la tarjeta: la línea de arriba se hunde, el texto se curva hacia él y los bordes se inclinan hacia dentro. Haz clic y la notificación cae dentro y se estira durante la caída, un temporizador ocupa su lugar y, al terminar la concentración, vuelve a aparecer.

La deformación está dibujada a mano en un shader y se mantiene sutil, para que la página siempre sea legible. Pero la idea va más allá de un botón: un negro que absorbe, una luz cálida en los bordes, un movimiento que atrae en lugar de saltar. Eso basta para marcar el tono de toda una marca.