Table des matières
Boutons
Bouton principal (CTA)
Desktop : Arrondi : 32px | Ombre sur hover : 4px 4px 10px rgba (0,0,0,0.1) | Texte : 1.1rem | Marge interne : 16px 32px
Mobile : Arrondi : 32px | Texte : 1rem | Marge interne : 12px 24px
Bouton secondaire : action alternative ou complémentaire (ex : voir plus,)
Desktop : Arrondi : 32px | Ombre sur hover : 4px 4px 10px rgba (0,0,0,0.1) | Texte : 0.95rem | Marge interne : 14px 28px
Mobile : Arrondi : 32px | Ombre sur hover : 4px 4px 10px rgba (0,0,0,0.1) | Texte : 0.9rem | Marge interne : 10px 22px
Bouton fiche : action alternative ou complémentaire (ex : voir plus,)
Desktop : Arrondi : 32px | Ombre sur hover : 4px 4px 10px rgba (0,0,0,0.1) | Texte : 0.95rem | Marge interne : 12px 16x
Mobile : Arrondi : 32px | Ombre sur hover : 4px 4px 10px rgba (0,0,0,0.1) | Texte : 0.9rem | Marge interne : 8px 16px
Marges et Espacements autour des boutons
Desktop
- Entre deux boutons côte à côte : 16px à 24px
- Entre un bouton et un texte au-dessus : 24px à 32px
- Entre un bouton et le bas d’un bloc : 32px minimum pour laisser respirer
Mobile
- Entre deux boutons côte à côte : 8px
- Entre un bouton et un autre élément (texte, image, etc.) : 16px
- Dans une section CTA (comme un bouton sous un texte explicatif) : 24px
- Dans une liste verticale (ex : plusieurs boutons d’action) : 12px
CTA
Le CTA (Call-To-Action) est un élément clé de conversion qui guide l’utilisateur vers une action spécifique : inscription, exploration, page secondaire mise en avant… Placé stratégiquement, il capte l’attention et facilite la navigation en orientant le parcours utilisateur.
Desktop
Container gauche : Espacement ligne 24px; Titre H2 : 3.5rem (tablette 3rem) ; Graisse : 800; Interlignage : 1.1em | Baseline : Corps (texte principal) | Bouton Principal
Container droit : Image : 500x625px; Arrondi : 16px; Ombre : Couleur principal de la photo rgba(0, 0, 0, 0.15); Horizontal et vertical 10, flou 30
Mobile
Container bas (texte) : Titre H2 : 1.8rem; Graisse : 800; Interlignage : 1.1em | Baseline : Corps (texte principal) | Bouton Principal
Modèle CTA pleine largeur avec baseline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
