Botones

Los dos niveles

Botones en línea

El control por defecto: un botón con radio de 8 píxeles para acciones dentro de formularios, tarjetas y prosa. Verde sólido para la acción principal, verde con contorno para la secundaria. Un único principal por grupo.

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

CTA en forma de píldora

Píldoras más altas, de 48 píxeles, para las llamadas a la acción a nivel de página: las que un visitante debería ver desde el otro lado de la sala, como «Descargar CV» o «Reservar una llamada». Sólida y con contorno, el mismo par de verdes.

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

Estados

Cada estado, renderizado. El hover oscurece el verde; el foco dibuja el anillo verde compartido de 2 píxeles; un control deshabilitado baja a una opacidad reducida sin cambiar de tono, de modo que sigue leyéndose como el mismo control. Las columnas de hover y foco muestran esos estados ya aplicados, porque una página estática no puede mantener un cursor sobre sí misma.

La mayoría de los botones del sitio son enlaces, así que un estado deshabilitado real es raro; las flechas de serie son el ejemplo vivo de esta convención.

Contenido

Las etiquetas son un verbo y un sustantivo, en estilo oración, en una sola línea. Di qué ocurre, desde el lado del lector, sin «mi» ni «tu».

Botones de icono

Algunos botones son un glifo, no una palabra: los círculos sociales de la portada, el conmutador de tema, los controles de la barra de lectura. El glifo se queda en 15 a 20 píxeles mientras el círculo aporta el área de pulsación, y el color sigue las reglas del texto: apagado en reposo, verde al pasar el cursor. Abajo, los componentes reales.

Cuándo usarlo

Dónde vive

En línea: .btn con .btn-primary o .btn-outline. Píldoras: .hero-cta con .hero-cta-solid o .hero-cta-outline, agrupadas en .hero-ctas.