Biblioteka komponentów

🔘 Przyciski

Gotowe przyciski w różnych stylach. Kliknij na kartę, żeby zobaczyć kod i opis każdej właściwości CSS.

18 wariantów · 6 darmowych

Przycisk Solid

Darmowy

Podstawowy wypełniony przycisk. Używaj do głównej akcji na stronie.

<button class="przycisk">
  Kliknij mnie
</button>

.przycisk {
  background: #7c6fff;  /* kolor tła */
  color: #ffffff;       /* kolor tekstu */
  padding: 12px 28px;   /* odstępy wewnętrzne */
  border: none;         /* brak obramowania */
  border-radius: 8px;   /* zaokrąglenie rogów */
  font-size: 16px;      /* rozmiar czcionki */
  font-weight: 600;     /* grubość czcionki */
  cursor: pointer;      /* kursor jako ręka */
  transition: opacity 0.2s; /* płynna zmiana */
}
.przycisk:hover {
  opacity: 0.85;        /* przyciemnij po najechaniu */
}

padding: 12px 28px12px góra/dół, 28px lewo/prawo — kontroluje rozmiar przycisku

border-radius: 8pxzaokrąglenie rogów — 0 = kwadrat, 999px = pigułka

cursor: pointerzmienia kursor na rączkę — sygnalizuje klikalność

transition: opacity 0.2sanimacja trwa 0.2 sekundy — efekt płynny zamiast skokowego

⚙️ Co możesz zmienić:

Kolor tłabackground

Zaokrąglenieborder-radius

Rozmiarpadding + font-size

Cieńbox-shadow

Przycisk Outline

Darmowy

Przezroczysty z obramowaniem. Idealny jako drugoplanowy obok przycisku Solid.

<button class="przycisk-outline">
  Kliknij mnie
</button>

.przycisk-outline {
  background: transparent;    /* brak tła */
  color: #7c6fff;             /* kolor tekstu = kolor bordera */
  padding: 11px 28px;
  border: 2px solid #7c6fff;  /* obramowanie 2px */
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.przycisk-outline:hover {
  background: #7c6fff;  /* wypełnij po najechaniu */
  color: #ffffff;
}

background: transparentcałkowicie przezroczyste tło — widać co jest za przyciskiem

border: 2px solid #7c6fffgrubość obramowania, styl (solid=ciągła linia), kolor

transition: background 0.2s, color 0.2sanimujemy dwie właściwości jednocześnie po przecinku

Przycisk Ghost

Darmowy

Subtelny, prawie niewidoczny. Używaj do akcji dodatkowych, np. "Anuluj".

<button class="przycisk-ghost">
  Kliknij mnie
</button>

.przycisk-ghost {
  background: rgba(255,255,255,0.06); /* półprzez. biel */
  color: #e8e8f0;
  padding: 11px 28px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.przycisk-ghost:hover {
  background: rgba(255,255,255,0.12);
}

rgba(255,255,255,0.06)kolor z przezroczystością — ostatnia liczba (0–1) to przeźroczystość

Przycisk Gradient

Darmowy

Efektowny przycisk z przejściem kolorów. Przyciąga wzrok — używaj oszczędnie.

<button class="przycisk-gradient">
  Premium ✦
</button>

.przycisk-gradient {
  background: linear-gradient(
    135deg,    /* kąt — 0=pionowo, 90=poziomo */
    #7c6fff,   /* kolor startowy */
    #ff6f91    /* kolor końcowy */
  );
  color: white;
  padding: 13px 32px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(124,111,255,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.przycisk-gradient:hover {
  transform: translateY(-2px);  /* przesuń w górę */
  box-shadow: 0 8px 30px rgba(124,111,255,0.6);
}

linear-gradient(135deg, …)gradient liniowy — 135deg = po skosie. Możesz wpisać dowolny kąt od 0 do 360

box-shadow: 0 4px 20px …0=poziomo, 4px=pionowo, 20px=rozmycie, potem kolor

transform: translateY(-2px)przesuń element o 2px w górę przy hover — efekt "unoszenia"

Przycisk z ikoną (emoji)

Darmowy

Przycisk z emoji lub ikoną po lewej. Świetny do CTA z kontekstem (pobierz, wyślij, kup).

<button class="przycisk-icon">
  📥 Pobierz plik
</button>

.przycisk-icon {
  background: #7c6fff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;   /* flexbox w przycisku */
  align-items: center;    /* wyśrodkuj ikona+tekst */
  gap: 8px;               /* odstęp między emoji a tekstem */
  transition: opacity 0.2s;
}
.przycisk-icon:hover {
  opacity: 0.85;
}

display: inline-flexflexbox który nie zajmuje całej szerokości — przycisk ma tylko swój rozmiar

gap: 8pxodstęp między elementami wewnątrz fleksa — tu między emoji a tekstem

Przycisk Pigułka

Darmowy

Całkowicie zaokrąglony — popularny w nowoczesnych serwisach. Jedna zmiana w CSS.

<button class="przycisk-pill">
  Zasubskrybuj →
</button>

.przycisk-pill {
  background: #7c6fff;
  color: white;
  padding: 12px 32px;
  border: none;
  border-radius: 999px; /* ← to tworzy pigułkę! */
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s;
}
.przycisk-pill:hover {
  transform: scale(1.04); /* lekkie powiększenie */
}

border-radius: 999pxwartość większa niż połowa wysokości = idealna pigułka. 999px to trik — działa zawsze niezależnie od rozmiaru przycisku

transform: scale(1.04)skaluje element do 104% przy hover — subtelne powiększenie

🔒

+12 więcej wariantów przycisków

Loading, disabled, rozmiary XS–XL, z badge, neon, 3D i więcej — w planie Premium

Odblokuj Premium

📝 Formularze

Gotowe inputy, pola textarea i zestawy formularzy kontaktowych z pełnym CSS.

10 wariantów · 3 darmowe

Pole e-mail + przycisk

Darmowy

Klasyczny mini formularz do zapisu na newsletter. Dwa elementy, jedno CSS.

<input 
  type="email" 
  class="pole-email"
  placeholder="Twój e-mail"
>
<button class="przycisk">
  Zapisz się →
</button>

.pole-email {
  width: 100%;
  padding: 12px 16px;
  background: #0d0d14;      /* ciemne tło */
  border: 1px solid #2a2a40; /* szare obramowanie */
  border-radius: 8px;
  color: #e8e8f0;           /* jasny tekst */
  font-size: 15px;
  outline: none;            /* usuń domyślny focus */
  transition: border-color 0.2s;
}
.pole-email::placeholder {
  color: #7878a0;           /* kolor tekstu placeholder */
}
.pole-email:focus {
  border-color: #7c6fff;    /* fioletowe obramowanie przy focus */
}

outline: noneusuwa domyślny niebieski kontur przeglądarki — zamiast tego stylujemy własny focus

::placeholderpseudo-element do stylowania tekstu zastępczego — inny kolor niż wpisany tekst

:focuspseudo-klasa aktywna gdy użytkownik kliknie w pole — tu zmieniamy kolor obramowania

🔒

+7 więcej formularzy

Formularz kontaktowy, login/rejestracja, checkbox, select, textarea — w Premium

Odblokuj Premium