Komponenty Przyciski i linki
Komponenty
Przyciski i linki
Przyciski mają ostre krawędzie (rounded-button = 0). Hover nie skaluje – zmienia kolor: primary wypełnia się jasną miętą z góry na dół (ta sama mechanika i tempo co kafelki usług) i sięga samej krawędzi, bez obrysu; secondary zyskuje pine. Wyjątek to primary na jasnym miętowym tle (baner CTA) – tam zachowuje ciemny obrys, żeby się nie zlał. Na jeden widok przypada zwykle jeden przycisk primary – reszta to akcje drugorzędne i linki.
Warianty
Trzy podstawowe style. Primary to ciemny przycisk z miętowym tekstem, akcent odwraca relację, secondary jest obrysowy. Na hover primary wypełnia się jasną miętą z góry na dół (mechanika i tempo jak w kafelkach usług), akcent przyciemnia miętę, secondary zyskuje pine.
<!-- Primary: najazd mięty z góry na dół (.btn-sweep + data-label) -->
<a class="btn-sweep rounded-button border border-ink bg-ink px-6 py-2.5 text-center text-sm font-semibold text-mint" data-label="Primary">Primary</a>
<!-- Akcent: hover przyciemnia miętę ku ink -->
<a class="rounded-button bg-mint px-6 py-2.5 text-sm font-semibold text-ink transition-colors duration-300 ease-[var(--ease-out-soft)] hover:[background-color:color-mix(in_srgb,var(--color-mint)_80%,var(--color-ink))]">Akcent</a>
<!-- Secondary: hover → ramka i tekst pine -->
<a class="rounded-button border border-line px-6 py-2.5 text-sm font-semibold transition-colors hover:border-pine hover:text-pine">Secondary</a>Na ciemnym tle
W sekcjach ink primary robi się miętowy, a obrysy używają cream z kryciem. Tak działają strzałki karuzeli opinii.
Na miętowym tle
Gdy primary leży na jasnym miętowym tle (baner CTA na dole strony), domyślny najazd zlałby się z tłem. Modyfikator .btn-sweep--on-mint trzyma najazd wewnątrz ramki i zachowuje ciemny obrys, więc przycisk zostaje czytelny.
<!-- Primary na jasnej mięcie: dołóż .btn-sweep--on-mint, żeby został obrys -->
<a class="btn-sweep btn-sweep--on-mint rounded-button border border-ink bg-ink px-6 py-2.5 text-center text-sm font-semibold text-mint" data-label="Skontaktuj się">Skontaktuj się</a>Rozmiary
Domyślny (px-6 py-2.5) i kompaktowy (px-5 py-2). Tekst zawsze text-sm font-semibold.
<button class="btn-sweep rounded-button border border-ink bg-ink px-6 py-2.5 text-center text-sm font-semibold text-mint" data-label="Domyślny">Domyślny</button>
<button class="btn-sweep rounded-button border border-ink bg-ink px-5 py-2 text-center text-sm font-semibold text-mint" data-label="Kompaktowy">Kompaktowy</button>Stany
Hover wypełnia przycisk jasną miętą z góry na dół (najazd jak w kafelkach usług), focus-visible rysuje obrys 2 px (pine, offset 3 px), disabled gaśnie i blokuje kursor.
<button class="btn-sweep … border border-ink" data-label="Hover">Hover</button>
<button class="… disabled:opacity-40 disabled:pointer-events-none" disabled>Disabled</button>Linki
Linki tekstowe używają animowanego podkreślenia (.link-underline), które wjeżdża od lewej. W treści (.prose) link jest podkreślony statycznie.
<a href="#" class="link-underline font-medium text-pine">Link z podkreśleniem</a>
<a href="#" class="link-underline inline-block text-sm font-semibold text-pine">Czytaj dalej →</a>.link-underline {
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1.5px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s var(--ease-out-soft);
}
.link-underline:hover { background-size: 100% 1.5px; }Wytyczne
Krótkie zasady, które trzymają przyciski w ryzach.
- Jeden przycisk primary na widok – reszta to secondary albo linki.
- Etykieta zaczyna się od czasownika: „Wyślij wiadomość", „Zobacz projekty".
- Hover zmienia kolor, nie skaluje – informacja zwrotna bez przeskoku układu.
- Ikona w przycisku zawsze z
aria-hidden; znaczenie niesie tekst.