Mga button

Dalawang tier. Ang mga inline na button ang nagdadala ng mga karaniwang aksyon sa loob ng mga form at card; ang mga pill CTA naman ang nagdadala ng isa o dalawang call to action na nag-aangkla sa buong pahina. Ang pag-alam kung saang antas nabibilang ang isang kontrol ang pinakamalaking bahagi ng desisyon.

Ang dalawang tier

Mga inline na button

Ang default na kontrol: isang button na may 8-pixel na radius para sa mga aksyon sa loob ng mga form, card at prose. Solidong berde para sa pangunahing aksyon, outline na berde para sa secondary. Isang pangunahin lang bawat grupo.

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

Mga pill CTA

Mas matataas na 48-pixel na pill para sa mga panawagan sa antas ng pahina: ang mga dapat makita ng bisita kahit mula sa malayo, tulad ng “Download CV” o “Book a call”. Solid at outline, parehong pares ng berde.

I-download ang CV Mag-book ng Tawag

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

Mga state

Bawat state, ni-render. Pinapalalim ng hover ang berde; iginuguhit ng focus ang shared na 2-pixel na berdeng ring; ang disabled na control ay bumababa sa mababang opacity nang hindi nagbabago ang kulay, kaya mababasa pa rin itong parehong control. Ipinapakita ng mga column ng hover at focus ang mga state na iyon nang naka-apply, dahil hindi kayang mag-hover ng cursor ang isang static na page sa sarili nito.

Default

Hover

Focus

Disabled

Karamihan ng mga button sa site ay mga link, kaya bihira ang tunay na disabled state; ang mga arrow ng series ang live na halimbawa ng kumbensyong ito.

Nilalaman

Ang mga label ay isang pandiwa at isang pangngalan, sa sentence case, sa isang linya. Sabihin kung ano ang mangyayari, mula sa panig ng mambabasa, nang walang “my” o “your”.

Mga icon button

May mga button na glyph, hindi salita: ang mga round social circle sa hero, ang theme toggle, ang mga control ng reading bar. Ang glyph ay nananatili sa 15 hanggang 20 pixels habang ang circle ang nagbibigay ng hit area, at ang kulay ay sumusunod sa mga rule ng text: muted kapag nakapahinga, berde kapag naka-hover. Sa ibaba, ang mga totoong component.

Ang mga live na social link at ang totoong theme toggle.

Kailan gagamitin

Gawin

Gumamit ng isang pangunahing button bawat grupo; gawing outline o plain ang iba.

Huwag

Magsalansan ng dalawang solidong-berdeng button nang magkatabi: walang nangunguna.

Gawin

Lagyan ng label na may pandiwa at pangngalan: “Download CV”, “Book a call”.

Huwag

Sumulat ng “Click here” o “Submit”; sabihin kung ano ang ginagawa ng button.

Gawin

I-download ang CV

Ilaan ang mga pill CTA para sa mga aksyon sa antas ng pahina; gumamit ng mga inline na button sa lahat ng iba pa.

Huwag

I-grey out ang isang disabled na button nang labis na hindi na ito mukhang kontrol.

Kung saan ito matatagpuan

Inline: .btn na may .btn-primary o .btn-outline. Pill: .hero-cta na may .hero-cta-solid o .hero-cta-outline, na nakagrupo sa .hero-ctas.