Botons

Els dos nivells

Botons en línia

El control per defecte: un botó amb un radi de 8 píxels per a accions dins de formularis, targetes i text. Verd sòlid per a l'acció primària, verd amb contorn per a la secundària. Un únic primari per grup.

<button class="btn btn-primary">…</button>
<button class="btn btn-outline">…</button>

CTA de píndola

Píndoles més altes, de 48 píxels, per a les crides a l'acció de tota la pàgina, les que un visitant hauria de veure des de l'altra punta de la sala, com ara «Baixa el CV» o «Reserva una trucada». Sòlid i contorn, la mateixa parella de verds.

<div class="hero-ctas">
  <a class="hero-cta hero-cta-solid">…</a>
  <a class="hero-cta hero-cta-outline">…</a>
</div>

Estats

Cada estat, renderitzat. El hover enfosqueix el verd; el focus dibuixa l'anell verd compartit de 2 píxels; un control desactivat baixa a una opacitat baixa sense canviar de to, de manera que encara es llegeix com el mateix control. Les columnes de hover i de focus mostren aquests estats aplicats, perquè una pàgina estàtica no pot mantenir un cursor sobre si mateixa.

La majoria de botons del lloc són enllaços, així que un estat desactivat de debò és rar; les fletxes de sèrie són l'exemple viu d'aquesta convenció.

Contingut

Les etiquetes són un verb i un nom, en majúscula inicial, en una sola línia. Digues què passa, des del punt de vista del lector, sense «el meu» ni «el teu».

Botons d’icona

Alguns botons són un glif, no una paraula: els cercles socials de la portada, el commutador de tema, els controls de la barra de lectura. El glif es queda en 15 a 20 píxels mentre el cercle aporta l’àrea de toc, i el color segueix les regles del text: apagat en repòs, verd en passar-hi per sobre. A sota, els components reals.

Quan utilitzar-ho

On es troba

En línia: .btn amb .btn-primary o .btn-outline. Píndoles: .hero-cta amb .hero-cta-solid o .hero-cta-outline, agrupats a .hero-ctas.