Boutons d’appel à l’action : donner au clic principal sa propre gravité

Le bouton d’appel à l’action est celui autour duquel toute une page est construite. Il invite au seul clic qui compte. Pourtant, la plupart se ressemblent : une pilule lumineuse, un verbe court, une flèche au bout.

Inspirés par Beautiful UI, une bibliothèque de composants d’interface du studio Turbo, nous avons voulu donner un vrai poids à ce clic. Le bouton est donc le trou noir lui-même : une pilule d’un noir pur dont le bord est un horizon des événements. Une lumière chaude circule autour en fins filaments, lentement, même au repos.

Survolez-le et l’horizon s’éveille. Le bouton tout entier attire la carte : la ligne au-dessus fléchit, le texte se courbe vers lui, les bords s’inclinent vers l’intérieur. Cliquez, et la notification tombe dedans en s’étirant dans sa chute, un minuteur prend sa place et, quand le focus prend fin, elle réapparaît.

La déformation est dessinée à la main dans un shader et reste subtile, pour que la page demeure toujours lisible. Mais l’idée dépasse un simple bouton : un noir qui absorbe, une lumière chaude sur les bords, des mouvements qui attirent au lieu de jaillir. Cela suffit à donner le ton à toute une marque.