Generator Przycisków CSS
Generator przycisków CSS zamienia ustawienia wizualne w gotową do wklejenia regułę. Przycisk potrzebuje tylko background-color, color, padding i border-radius; obramowanie jest opcjonalne, a padding zapisuje się najpierw w pionie, potem w poziomie. Przykład: padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff daje zaokrąglony niebieski przycisk, którego etykieta osiąga poziom AA WCAG przy 5,17:1.
Podgląd
Kontrola dostępności
Dostosuj
Szybkie Szablony
Wygenerowany Kod
Popularne narzędzia
O Generatorze Przycisków CSS
Generator przycisków CSS zamienia garść suwaków i próbników kolorów w jedną regułę CSS, której przycisk naprawdę potrzebuje. Ustawiasz etykietę, kolor tła i tekstu, rozmiar i grubość czcionki, poziomy i pionowy padding, promień zaokrąglenia, grubość i kolor obramowania oraz jedną z czterech głębokości cienia; opcjonalny drugi kolor zmienia płaskie wypełnienie w gradient liniowy pod kątem 135 stopni. Podgląd znajduje się nad suwakami i jest prawdziwym przyciskiem HTML z twoimi wartościami, w rozmiarze, w jakim pojawi się na twojej stronie - to, co zatwierdzisz, jest tym, co wdrożysz.
Dwie rzeczy sprawiają, że wynik nadaje się do użytku, a nie tylko do oglądania. Po pierwsze, panel kodu ma dwie karty: wielokrotnego użytku klasę .btn z regułami :hover, :active, :focus-visible i :disabled do wrzucenia w arkusz stylów oraz ten sam element button ze wszystkim wpisanym w atrybut style - dla kreatorów stron, bloków CMS i szablonów e-mail, które usuwają zewnętrzny CSS. Po drugie, panel dostępności mierzy parę kolorów według WCAG 2.2 i podaje współczynnik kontrastu z werdyktem AAA, AA lub niepowodzeniem, przełączając się na progi dla dużego tekstu, gdy rozmiar i grubość na to pozwalają. Podaje też renderowaną wysokość - dwukrotność paddingu pionowego, plus dwukrotność obramowania, plus 1,2 razy rozmiar czcionki, czyli interlinię, którą reguła ustala tak, aby przycisk na ekranie miał dokładnie deklarowaną wysokość - w odniesieniu do celów 24 x 24 i 44 x 44 pikseli CSS z kryteriów 2.5.8 i 2.5.5.
Gradient jest sprawdzany względem obu punktów i pokazywany jest gorszy z dwóch współczynników. Osiem szablonów - Podstawowy, Niebezpieczny, Sukces, Obrys, Pigułka, Gradient, Stonowany i Neon - to punkty wyjścia, a nie stan docelowy: kliknij jeden i przesuwaj suwaki dalej. Żaden kolor, żadna etykieta ani położenie suwaka nie są nigdzie wysyłane; obliczenia kontrastu, podgląd i kod powstają w samej stronie, dlatego współczynnik odświeża się przy tym samym naciśnięciu klawisza, które przerysowuje przycisk. To, co kopiujesz, to jedna klasa bez frameworka do zainstalowania, bez kroku budowania i bez skryptu działającego w tle.
Przypadki użycia
Jak używać
Wpisz treść przycisku w polu tekstu przycisku, a następnie ustaw kolor tła i kolor tekstu za pomocą próbek lub wpisując obok nich kody HEX.
Suwakami rozmiaru czcionki, marginesu wewnętrznego w poziomie i w pionie oraz zaokrąglenia narożników nadaj przyciskowi kształt, a zwiększając grubość obramowania i ustawiając jego kolor, uzyskasz wersję konturową.
Wybierz Grubość czcionki: Normalna, Średnia, Półgruba lub Pogrubiona, oraz Cień: Brak, Mały, Średni lub Duży.
Zaznacz gradient i wybierz drugi kolor, aby tło przechodziło w ukośny gradient z dwóch barw.
Kliknij kartę w Szybkich Szablonach, na przykład Podstawowy, Obrys, Pigułka, Gradient, Stonowany lub Neon, aby wczytać gotowy styl, który możesz dalej dopracowywać.
Sprawdź działający przycisk w panelu podglądu, przełącz zakładkę wyniku na CSS albo HTML + CSS i naciśnij ikonę kopiowania przy polu z kodem.
Porady Pro
- Najpierw ustaw rozmiar czcionki. Padding i zaokrąglenie ocenia się znacznie łatwiej, gdy etykieta ma już docelowy rozmiar, a odczyt wysokości (2 x padding pionowy + 2 x grubość obramowania + 1,2 x rozmiar czcionki) zmienia się razem z nim.
- Wczytaj szablon, a potem dopracuj. Obrys i Stonowany startują już z grubością obramowania powyżej zera, co jest najkrótszą drogą do przycisku pomocniczego.
- Wpisuj kody szesnastkowe w pole obok próbki, zamiast szukać w oknie wyboru koloru; podgląd i współczynnik kontrastu odświeżają się przy każdym znaku.
- Poziom AA obowiązuje przy każdym rozmiarze tekstu; zmienia się tylko próg: 4,5:1 dla tekstu zwykłego i 3:1, gdy etykieta ma 24px albo 18,66px pogrubione. Para o kontraście 3:1 może wyglądać dobrze na jasnym monitorze i być nieczytelna na dworze, więc traktuj niższy próg jako sufit, nie jako cel.
- Gradienty są sprawdzane względem obu punktów i pokazywany jest gorszy współczynnik, więc jeśli zawodzi tylko jeden koniec, przesuń ten punkt zamiast przemalowywać cały przycisk.
Rozwiązywanie problemów
Skopiowany CSS nie daje żadnego widocznego efektu na mojej stronie.
Klasa jest nadpisywana albo nigdy nie została zastosowana. Sprawdź, czy element ma class="btn", ładuj swój arkusz stylów po CSS frameworka i otwórz panel Styles w narzędziach deweloperskich: przekreślona deklaracja oznacza, że wygrywa inny selektor - specyficznością albo kolejnością.
Gradient wygląda płasko albo w ogóle się nie pojawia.
Gradient to obraz tła, nie kolor tła. Zaznacz Gradient, aby narzędzie zwróciło background: linear-gradient(...) zamiast background-color. Jeśli nadal go nie widać, poszukaj późniejszej właściwości skróconej background albo późniejszego background-image na tym samym elemencie: skrócona przywraca background-image do none i kasuje gradient. Późniejszy background-color nie może go zasłonić, bo CSS Backgrounds 3 maluje kolor pod obrazami tła.
Odznaka kontrastu mówi, że kolory nie przechodzą, ale przycisk wydaje mi się czytelny.
Kontrast mierzy się luminancją względną, a nie tym, jak żywy wydaje się kolor. Pary półtonów, jak #f59e0b z białym tekstem, lądują koło 2:1, choć wyglądają jaskrawo. Przyciemnij tło albo zmień etykietę na prawie czarną; współczynnik odświeża się w trakcie pisania.
Często zadawane pytania
Napisz jedną regułę dla klasy i ustaw sześć deklaracji: background-color, color, font-size, font-weight, padding i border-radius. box-shadow oraz obramowanie dodawaj tylko wtedy, gdy wymaga tego projekt. Generator pisze dokładnie taką regułę za ciebie: przesuń suwaki, sprawdź podgląd na żywo, a potem skopiuj blok .btn z karty CSS do swojego arkusza stylów.
Karta CSS daje wielokrotnego użytku klasę .btn wraz z regułami stanów do wklejenia w arkusz stylów, więc każdy przycisk na stronie zmieni się po edycji tego jednego bloku. Karta HTML + CSS daje pojedynczy element button z tymi samymi deklaracjami wpisanymi w atrybut style, czego potrzebują kreatory stron, bloki CMS i szablony e-mail, bo usuwają zewnętrzne arkusze stylów. Zamień go na odnośnik z href, gdy kliknięcie ma prowadzić dalej.
Podnieś suwak Promień krawędzi. Około 8px otrzymasz złagodzony prostokąt używany w większości interfejsów, a powyżej połowy wysokości przycisku narożniki zlewają się w pigułkę. Przy domyślnej czcionce 16px i paddingu pionowym 12px przycisk ma 43px, więc każde zaokrąglenie powyżej mniej więcej 22 wygląda już na w pełni okrągłe, a 999px w ręcznie pisanym CSS znaczy to samo.
Tak. Przy każdej zmianie koloru tekstu lub tła przelicza współczynnik kontrastu WCAG i pokazuje AAA, AA albo niepowodzenie. Zwykły tekst potrzebuje 4,5:1 dla AA i 7:1 dla AAA; tekst 24px, albo 18,66px pogrubiony, liczy się jako duży i potrzebuje tylko 3:1 i 4,5:1. Wypełnienia gradientowe są mierzone względem obu punktów koloru.
Panel rozmiaru podaje renderowaną wysokość jako dwukrotność paddingu pionowego, plus dwukrotność grubości obramowania, plus 1,2 razy rozmiar czcionki - to interlinia, którą generator wpisuje w regułę, dzięki czemu liczba zgadza się z przyciskiem narysowanym powyżej. Kryterium 2.5.8 WCAG 2.2 wymaga celu 24 x 24 pikseli CSS, a 2.5.5 podnosi go do 44 x 44. Czcionka 16px z paddingiem pionowym 12px daje 43px, czyli wyraźnie powyżej minimum.
Użyj button, gdy kliknięcie działa na bieżącej stronie: wysyła formularz, otwiera okno dialogowe, uruchamia JavaScript. Domyślnie przyjmuje fokus, reaguje na Enter i spację oraz obsługuje atrybut disabled. Użyj odnośnika z href, gdy kliknięcie prowadzi do innego adresu URL, aby kliknięcie środkowym przyciskiem i „otwórz w nowej karcie” nadal działały. Oba mogą nosić tę samą klasę .btn.
Wygenerowany CSS zawiera już .btn:hover i .btn:active. Zostaw zaznaczone pole „Dołącz stany focus i disabled do kodu”, a dostaniesz dodatkowo .btn:focus-visible z obrysem 3px odsuniętym o 2px oraz .btn:disabled z połową krycia i cursor: not-allowed. Nigdy nie usuwaj obrysu fokusu bez widocznego zamiennika, bo osoby korzystające z klawiatury tracą wtedy orientację.
Tak. Wynik to zwykły CSS bez licencji, bez obowiązku podawania źródła i bez zależności w czasie działania, a komentarz z podziękowaniem w pierwszym wierszu można skasować. Nic z tego, co wpisujesz, nie jest wysyłane: podgląd, wygenerowany kod i obliczenia kontrastu powstają w JavaScripcie na tej stronie, więc twoje kolory i etykiety nigdy nie trafiają na serwer.
Prawie zawsze winne są style dziedziczone. Reset frameworka, font-family rodzica, globalna reguła dla button albo selektor o wyższej specyficzności potrafią nadpisać wklejoną klasę. Ładuj swój arkusz stylów po CSS frameworka, trzymaj .btn na jednym elemencie i czytaj panel Styles w narzędziach deweloperskich: przekreślona deklaracja mówi dokładnie, który selektor wygrał.