Generator przycisków CSS

Twórz przyciski CSS solid, gradient, outline, ghost i soft. Ustaw cienie, promień, hover, focus i disabled. Skopiuj gotowy kod dla swojej strony.

Bez rejestracji
Szybkie działanie
Operacje w pamięci

Przewodnik krok po kroku

Zero back-endu, 100% lokalnie.

Podgląd

Tekst przycisku

Selektor CSS

Wariant

Rozmiar (px)

Grubość

Rozstaw liter (em)

Kolor tekstu

Tło

Tło 2 (gradient)

Kąt gradientu

Padding X (px)

Padding Y (px)

Zaokrąglenie (px)

Szerokość (px)

Kolor obramowania

X (px)

Y (px)

Blur (px)

Spread (px)

Kolor

Alfa (%)

Efekt hover

Jasność hover (%)

Czas przejścia (ms)

CSS

.btn-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  color: #FFFFFF;
  background-color: #2563EB;;
  border: 0;;
}

.btn-demo:hover {
  filter: brightness(105%);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px 0px rgba(0, 0, 0, 0.25);
}

.btn-demo:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.btn-demo:disabled, .btn-demo.disabled {
  opacity: .6; pointer-events: none;
}

HTML

<button class=\"btn-demo\">Przycisk</button>

Generator przycisków CSS – solid, gradient, outline, ghost i soft z podglądem

To narzędzie generuje kompletne style dla przycisków. Wybierasz wariant, kolory, promień, cień, zachowanie w hover i focus. Otrzymujesz gotowy CSS i prosty HTML do wklejenia w projekt. Szybko, spójnie i bez ręcznego liczenia wartości.

Funkcje kluczowe: warianty wyglądu, typografia, odstępy, obramowanie, cienie, gradienty, animacja, wzmocnienie jasności w hover, presety Primary, Secondary, Gradient, Ghost i Soft, a także stany focus i disabled.

Jak działa Generator przycisków CSS

Komponent buduje deklaracje CSS dla wskazanego selektora. Definiuje bazowe właściwości przycisku i automatycznie dodaje reguły dla stanów hover, focus-visible i disabled. Warianty ustalają, czy tło ma być jednolite, gradientowe, obrysowane, przeźroczyste czy miękkie. Dla gradientu możesz ustawić dwa kolory i kąt. Dla outline kontrolujesz szerokość i kolor obramowania. Dla ghost tło jest transparentne, więc nacisk kładziesz na kolor tekstu i interakcję.

Parametry i co zmieniają

Wygląd i kolorystyka

variant – solid, gradient, outline, ghost, soft.
textColor – kolor tekstu przycisku.
bgColor i bgColor2 – tło jednolite lub para kolorów gradientu.
angle – kąt gradientu w stopniach.

Typografia i rytm

fontSize – rozmiar w px.
fontWeight – waga fontu od 100 do 900.
letter – letter-spacing w em.
paddingX i paddingY – wewnętrzne odstępy.
radius – promień zaokrąglenia.

Obramowanie i cień

borderWidth i borderColor – szerokość i kolor krawędzi.
shadowX, shadowY, shadowBlur, shadowSpread – parametry cienia.
shadowColor i shadowAlpha – barwa i krycie cienia.

Interakcje i animacje

hoverEffect – none, raise lub press.
brightness – filtr jasności dla hover.
transition – czas przejść w ms.

Warianty i ich zastosowania

Wariant	Charakterystyka	Najlepsze użycie
solid	Jednolity kolor tła z opcjonalnym cieniem	Primary CTA, akcje dominujące
gradient	Tło z liniowym gradientem pod zadanym kątem	Hero, wyróżnienie wybranych akcji
outline	Przeźroczyste tło, widoczna ramka	Secondary CTA, mniej inwazyjne działania
ghost	Przeźroczyste tło i brak ramki	Linki akcyjne, lightweight CTA
soft	Delikatny kolor tła z subtelną ramką	Panelowe UI, ustawienia, mniej agresywne akcje

Przykłady kodu z generatora

1. Solid Primary z lekkim cieniem

/* Selector: .btn-primary */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 180ms ease;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
  color: #ffffff;
  background-color: #2563EB;
  border: 0;
}
.btn-primary:hover {
  filter: brightness(105%);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.25);
}
.btn-primary:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 8px 16px 0 rgba(0,0,0,0.20);
}
.btn-primary:disabled, .btn-primary.disabled {
  opacity: .6; pointer-events: none;
}

2. Gradient CTA z kątem 45

/* Selector: .btn-gradient */
.btn-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: 0 10px 24px 0 rgba(0,0,0,0.24);
  color: #ffffff;
  background-image: linear-gradient(45deg, #06B6D4, #3B82F6);
  border: 0;
}
.btn-gradient:hover {
  filter: brightness(108%);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px 0 rgba(0,0,0,0.25);
}
.btn-gradient:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 10px 24px 0 rgba(0,0,0,0.24);
}
.btn-gradient:disabled, .btn-gradient.disabled {
  opacity: .6; pointer-events: none;
}

3. Outline Secondary z wyraźnym kontrastem

/* Selector: .btn-outline */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 160ms ease;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12);
  color: #111827;
  background-color: #ffffff;
  border: 2px solid #CBD5E1;
}
.btn-outline:hover {
  filter: brightness(103%);
  transform: translateY(-1px);
  box-shadow: 0 6px 12px 0 rgba(0,0,0,0.18);
}
.btn-outline:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 4px 8px 0 rgba(0,0,0,0.12);
}
.btn-outline:disabled, .btn-outline.disabled {
  opacity: .6; pointer-events: none;
}

4. Ghost Link w stylu przycisku

/* Selector: .btn-ghost */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0em;
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 140ms ease;
  box-shadow: none;
  color: #2563EB;
  background-color: transparent;
  border: 1px solid transparent;
}
.btn-ghost:hover {
  filter: brightness(105%);
  transform: translateY(-1px);
}
.btn-ghost:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35);
}
.btn-ghost:disabled, .btn-ghost.disabled {
  opacity: .6; pointer-events: none;
}

5. Soft Button do paneli i ustawień

/* Selector: .btn-soft */
.btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0em;
  padding: 9px 14px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 160ms ease;
  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.18);
  color: #1F2937;
  background-color: #E5F2FF;
  border: 1px solid #BFDBFE;
}
.btn-soft:hover {
  filter: brightness(104%);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.22);
}
.btn-soft:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 2px 6px 0 rgba(0,0,0,0.18);
}
.btn-soft:disabled, .btn-soft.disabled {
  opacity: .6; pointer-events: none;
}

Dostępność i ergonomia

Zapewnij kontrast tekstu i tła co najmniej 4.5:1 dla tekstu standardowego.
Używaj :focus-visible, aby wskazanie klawiatury było wyraźne i nieinwazyjne dla użytkowników myszy.
Gradienty są efektowne, ale nie mogą utrudniać czytelności. Pilnuj bieli na jasnych przejściach.
Rozmiar klikowalny minimum 40x40 px na urządzeniach dotykowych.
Tekst na przyciskach powinien być zwięzły. Czasowniki aktywne podnoszą konwersję.

Presety w narzędziu

primary – solid w kolorze brandowym, zero ramki, wyraźny cień i efekt raise.
secondary – outline z neutralną ramką, mniejsza głębia cienia.
gradient – intensywny CTA z płynnym przejściem barw pod kątem.
ghost – przycisk lekki jak link, bez cienia i bez ramki.
soft – pastelowe tło, subtelna ramka i delikatny cień.

Najczęstsze błędy i szybkie poprawki

Zbyt mały kontrast – przyciemnij tło lub zwiększ jasność tekstu.
Zbyt ciężki cień – zmniejsz blur i alpha lub skróć offset Y.
Ostre krawędzie – podnieś radius o 2 px dla bardziej miękkiego wyglądu.
Przesadna animacja – skróć transition do 120–180 ms, efekt będzie responsywny.
Gradient o złym kierunku – skoryguj angle zgodnie z kompozycją hero i kierunkiem czytania.

Integracja wygenerowanego kodu

Ustal docelowy selektor, np. .btn-primary.
Wygeneruj CSS i wklej do arkusza stylów lub do sekcji <style>.
Skopiuj HTML przycisku i wstaw do widoku. Wypełnij atrybut aria-label lub treść przycisku adekwatnie do akcji.
Sprawdź stany hover, focus i disabled na desktopie i mobile.

Mini receptury

CTA do hero z lekkim press

.btn-cta {
  font-size: 18px; font-weight: 700; padding: 12px 20px; border-radius: 12px;
  color: #fff; background-image: linear-gradient(40deg, #22D3EE, #3B82F6);
  transition: all 180ms ease; box-shadow: 0 10px 24px 0 rgba(0,0,0,.22); border: 0;
}
.btn-cta:hover { transform: translateY(1px); filter: brightness(95%); }
.btn-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 10px 24px rgba(0,0,0,.22); }

Secondary w tabeli ustawień

.btn-secondary {
  font-size: 14px; padding: 8px 12px; color: #111827; background-color: #fff;
  border: 1px solid #CBD5E1; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.btn-secondary:hover { transform: translateY(-1px); filter: brightness(103%); }

Ghost jako link z ikoną

.btn-link {
  display: inline-flex; align-items: center; gap: .5rem; color: #2563EB; background-color: transparent;
  border: 1px solid transparent; padding: 6px 10px; border-radius: 8px; text-decoration: none;
}
.btn-link svg { width: 18px; height: 18px; }
.btn-link:hover { filter: brightness(110%); transform: translateY(-1px); }

Podsumowanie

Generator przycisków CSS przyspiesza projektowanie i utrzymuje spójność UI. W kilka klików tworzysz warianty dopasowane do roli przycisku i ujednolicasz stany interakcji. Zadbaj o kontrast, ergonomię i tempo animacji. Resztą zajmie się narzędzie i gotowy CSS, który łatwo wpiąć do dowolnego frameworka lub czystego HTML.