Trois formes, toutes recalées à la hauteur réelle de Longevity (46 px, police 16 px). Dans le contexte réel de la V6. Même thème, même carte, même animation au survol : seul le rayon change. Survole les boutons, le fond glisse dans les trois cas.
Ce qui est en ligne aujourd’hui. Le geste est bon, mais 8 px détonne au milieu d’éléments à 16, 24, 32 px et de pilules complètement rondes.
Le même geste Mouthix, mais au rayon du thème. Le carré devient un disque. Tu gardes le bloc-flèche et le fond qui glisse, et le bouton rentre enfin dans la page.
Sans bloc-flèche, exactement les boutons de tes captures Longevity (« Start assessment », « Schedule call »). Le plus sobre, mais on perd l’animation qui t’a plu.
Reconstruit à partir des valeurs relevées sur longevitytemplate.webflow.io : hauteur 46 px, padding 12 / 24 px, police 16 px en graisse 600, pilule complète. C’est l’étalon.
Le badge que tu as entouré fait 30 px. À gauche la version avec disque, à droite la pilule simple, pour comparer à chaque hauteur.
30 px passe le minimum d’accessibilité (24 px), mais reste loin des recommandations des plateformes : Apple conseille 44 px, Google 48 px pour une cible tactile. Ton bouton principal, c’est « Réserver ». C’est l’action qui fait vivre le cabinet, et elle se joue à 80 % au pouce sur un téléphone.
La sortie existe et elle est propre : on garde le bouton à 30 px à l’œil, et on élargit la zone cliquable à 44 px par une surface invisible autour. C’est déjà appliqué sur la rangée 30 px ci-dessus : le dessin ne change pas, mais la zone tactile est confortable. Tu peux l’avoir petit sans le payer en ratés.
Deuxième point : le badge est en capitales à 11 px, une typographie d’étiquette. Un bouton à cette taille impose de descendre le texte à 13 px, ce qui reste lisible mais mange dans ta marge de confort.
A · en contexte
B · en contexte
C · en contexte