Boutons et liens
Le bouton plein, le bouton au trait, la flèche qui sort, et le lien souligné.
Deux boutons
Le bouton plein est l’action qu’on veut voir faite ; le bouton au trait est l’autre chemin. Même police, mêmes angles droits, même flèche : seule la surface change. En taille courante dans une tête ou un formulaire, petit dans une carte, une cellule ou l’en-tête.
- Emploi
- Un lien qui engage : « Démarrer un projet », « Voir l’offre », « Lire le cas Bosco Services », « Réserver un créneau ».
- Moment
- Dans une tête de section (variante ligne), sous un chapô (.tr-cta), dans une carte, en fin de section (.tr-suite), et pour envoyer le formulaire.
- Jamais
- Deux pleins dans le même groupe. Un montant, le mot devis ou le mot tarif dans le libellé : le vérificateur bloque. Un bouton pour un lien de lecture courante : c’est un lien souligné.
Appelsrc/components/trame/Bouton.astro
<div class="tr-cta">
<Bouton href="/contact/">{ V3.cta }</Bouton>
<Bouton href="/offres/" variante="trait">{ V3.ouverture.boutonOffres }</Bouton>
</div> Appelsrc/components/trame/Bouton.astro
<Bouton href="/contact/" petit>{ V3.cta }</Bouton>
<Bouton href="/offres/site-internet/" variante="trait" petit>{ V3.offres.bouton }</Bouton>| Classe | Zone | Valeur |
|---|---|---|
| .tr .btn | le bouton | Inter 600 12,5 px, capitales, .11em, chiffres de tableau ; padding 15/20 px ; gap 12 px |
| .btn | le plein | fond var(--ink), texte var(--surface), bord 1 px var(--ink) |
| .btn--trait | le trait | fond var(--surface), texte var(--ink), bord var(--line) ; bord var(--ink) au survol |
| .btn--sm | le petit | padding 11/14 px, 11,5 px |
| .btn::before | la couche qui monte | translateY(100 %) puis 0 au survol, en 236 ms var(--ease) ; var(--grinn-deep) sous le plein, var(--pale) sous le trait |
| .btn:hover | le survol du plein | bord var(--grinn-deep) ; sans transition en mouvement réduit |
| .tr-cta | le groupe | flex, gap 12/14 px, margin-top 30 px ; sous 480 px le libellé passe à la ligne, padding-block 13 px |
| :focus-visible | le focus | contour 2 px var(--grinn-deep), décalé de 3 px |
| .tr-cc__appel-btn | le plein sur l’encre | la cellule d’appel de la page Réalisations : fond et bord var(--grinn), texte var(--ink) ; la couche qui monte est blanche et le bord passe au blanc ; contour de focus var(--grinn) |
| .tr-fiche__liens .btn | les boutons de la fiche d’un cas | petits, pleine largeur, la flèche au bout : le site ou les stores au trait, dans un nouvel onglet, puis le plein du contact |
La flèche qui sort
Chaque bouton finit par ↗ : le lien mène quelque part. La flèche est décorative, les lecteurs d’écran ne la lisent pas. Au survol, elle part de trois pixels vers le haut et la droite. Quand le lien sort du site, le bouton l’annonce.
Appelsrc/components/trame/Bouton.astro
<Bouton href="https://hepixgroup.com" variante="trait" externe>hepixgroup.com</Bouton>| Classe | Zone | Valeur |
|---|---|---|
| .ar | la flèche | ↗ dans un span aria-hidden ; transition transform 380 ms var(--ease) |
| .btn:hover .ar | au survol | translate(3px, -3px) |
| externe | le lien qui sort | target _blank, rel noopener, et « (nouvel onglet) » en texte masqué (.sr-only) après le libellé |
| label | le nom accessible | aria-label quand le libellé visible ne suffit pas : « Voir l’offre Site internet » sur une carte |
| .tr-cta .btn .ar | sous 360 px | masquée, pour que le libellé tienne sur une ligne |
Le lien dans le texte
Dans un paragraphe, le lien est à l’encre, souligné d’un trait vert profond qui s’épaissit au survol. Dans une carte de réalisation, c’est la carte entière qui est le lien.
L’IA, l’application mobile et le logiciel métier peuvent entrer dans le Crédit Impôt Innovation. Le site vitrine et la boutique standard n’y entrent pas. Comment ça marche
Appelsrc/components/trame/Prose.astro
<Prose>
<p>{ V3.offres.cii } <a href="/credit-impot-innovation/">{ V3.offres.ciiLien }</a></p>
</Prose>| Classe | Zone | Valeur |
|---|---|---|
| .tr-prose a | le lien courant | var(--ink), souligné 1 px var(--grinn-deep), décalé de .22em ; 2 px au survol |
| .tr-note .lk | le lien d’une note | même soulignement de 1 px ; le trait animé du .lk courant est retiré ; pas d’épaississement au survol |
| .tr-cel--note .lk | dans une cellule de note | même soulignement ; 2 px au survol |
| .tr-cas__lien::after | la carte de réalisation | inset 0 : toute la cellule est le lien ; la cellule pâlit au survol et la flèche part |
| .tr-cas__it h3 a:hover | le nom du client | souligné var(--grinn-deep), décalé de .18em |
| a.tr-cc__corps, a.tr-suivant | une carte de la page Réalisations, le cas suivant d’une page de cas | le lien est la carte entière ; le « Lire le cas » qu’elle porte n’est qu’un dessin (span.btn.btn--trait.btn--sm), car un lien n’en contient pas un autre ; au survol, la carte pâlit et la flèche part |
| .tr-fiche dd a | l’offre, dans la fiche d’un cas | souligné 1 px var(--grinn-deep), 2 px au survol ; toute sa ligne de fiche est cliquable |
| .tr-fil a, .tr-rail a | les liens de navigation | voir Étiquettes et annotations, et Page à rail |
Le bouton d’en-tête
Dans l’en-tête, un seul bouton, petit et plein, qui dit la même chose que l’ouverture : « Démarrer un projet ». Sous 480 px il prend le libellé court, « Démarrer » ; sous 380 px il se resserre et perd sa flèche ; sous 360 px et sous 340 px il se resserre encore.
Appelsrc/components/trame/EnTete.astro
<a class="btn btn--sm" href="/contact/">{ V3.cta } <span class="ar" aria-hidden="true">↗</span></a>| Classe | Zone | Valeur |
|---|---|---|
| .tr-hdr .btn--sm | le bouton d’en-tête | 11,5 px, .11em, capitales, chiffres de tableau ; padding 11/20 px, celui de .btn--sm : l’en-tête est hors de .tr, et la règle .tr .btn--sm (padding 11/14 px, 44 px de haut au moins) ne le touche pas ; 35,5 px de haut |
| sous 480 px | le libellé court | .hdr__cta-long masqué, .hdr__cta-court affiché : « Démarrer » |
| sous 380 px | écran étroit | padding-inline 12 px, 11 px, .08em ; la flèche disparaît |
| sous 360 px | plus étroit | padding-block 10 px (.hdr .btn--sm) : 33 px de haut |
| sous 340 px | plus étroit encore | padding-inline 8 px, .06em |
| V3.cta | le libellé | le même que le bouton plein de l’ouverture et du formulaire : tout le site dit la même chose que sa première page |
RègleUn seul bouton plein par groupe, une flèche sur chacun, et jamais d’argent dans un libellé.