Softonic

Generator przycisków CSS

Krok 1 / 4 Tekst przycisku

Tekst przycisku

Wpisz etykietę jako zwykły tekst. Tekst przypominający HTML zostanie zabezpieczony w wygenerowanym fragmencie.

Zbuduj przycisk i sprawdź jego stan domyślny, po najechaniu, przy fokusie klawiatury, wciśnięciu, wyłączeniu i ładowaniu. Ustaw jednolite lub dwukolorowe tło, obramowanie, odstępy, narożniki, cień i kolory stanów. Generator zabezpiecza etykietę, trzyma projekt w przeglądarce i tworzy semantyczny HTML oraz CSS o ograniczonych wartościach.

Jak utworzyć przycisk CSS

  1. 1

    Wpisz etykietę

    Podaj zwykły tekst widoczny na przycisku. Znaki przypominające HTML pozostają tekstem i nie są wykonywane.

  2. 2

    Ustaw wygląd podstawowy

    Wybierz tło, kolory tekstu i obramowania, rozmiar, wypełnienie, promień narożników oraz cień.

  3. 3

    Określ stany interakcji

    Ustaw kolory i ruch dla najechania, wciśnięcia i fokusu. Reguły wyłączenia i ładowania są dodawane automatycznie.

  4. 4

    Sprawdź wskazówki

    Przed eksportem sprawdź najniższy kontrast tekstu, kontrast wskaźnika fokusu i wymuszony minimalny rozmiar celu.

  5. 5

    Skopiuj lub pobierz

    Skopiuj zabezpieczony HTML i CSS albo pobierz samodzielny podgląd HTML w UTF-8.

Co zawiera wygenerowany kod

HTML korzysta z prawdziwego <button type="button">, a widoczna etykieta znajduje się w elemencie span. CSS obejmuje sześć stanów:

  • Domyślny dla zwykłego wyglądu
  • Najechanie dla urządzeń wskazujących
  • Fokus klawiatury przez :focus-visible
  • Wciśnięcie podczas naciskania
  • Wyłączenie przez właściwość disabled
  • Ładowanie przez aria-busy="true"

To aplikacja decyduje, kiedy przycisk jest wyłączony lub zajęty. Generator dostarcza wygląd, ale nie tworzy stanu aplikacji ani obsługi kliknięcia.

Kontrola kontrastu nie jest certyfikatem

Edytor oblicza najniższy kontrast tekstu dla tła podstawowego, końca gradientu, najechania i wciśnięcia. Celem dla zwykłego tekstu jest 4,5:1. Obrys fokusu jest porównywany z jasnym tłem podglądu przy celu 3:1 dla elementów nietekstowych.

Wartości pomagają wykryć częste problemy, ale gotowy przycisk może znaleźć się na innym tle. Ponownie sprawdź fokus i obramowanie w docelowym układzie. Jeśli cel wyłączonego elementu nie jest oczywisty, dodaj obok wyjaśnienie.

Rozmiar celu i ruch

Eksportowana reguła wymusza co najmniej 44 px szerokości i wysokości. To więcej niż minimum 24 CSS px w kryterium WCAG 2.2 2.5.8. W gotowym produkcie nadal liczą się układ, odstępy, wyjątki i wytyczne platformy.

Ruch po najechaniu i wciśnięciu jest usuwany przy preferencji ograniczenia ruchu. Wskaźnik ładowania zwalnia zamiast znikać.

Granice bezpiecznego wyniku

Etykieta jest normalizowana, ograniczana do 120 klastrów grafemów, oczyszczana z niewidocznych znaków sterujących kierunkiem i kodowana jako HTML. Kolory muszą być sześciocyfrowymi wartościami szesnastkowymi, a liczby są zaokrąglane i ograniczane do zakresów pól.

Pełny edytor działa w pamięci przeglądarki. Opcjonalny czterostronicowy tryb zapisuje wersjonowany projekt w sessionStorage bieżącej karty. Etykieta i ustawienia nie trafiają do URL ani żądań serwerowych.

Stan ładowania

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">Zapisywanie</span>
</button>

aria-busy informuje o trwającej aktualizacji. Dodaj disabled, jeśli trzeba zapobiec ponownej aktywacji. Po zakończeniu usuń oba atrybuty i umieść ważny komunikat w odpowiednim obszarze stanu.

Najczęściej zadawane pytania

Nie. Zapewnia obliczenia kontrastu, widoczny fokus, obsługę ograniczonego ruchu, semantyczny HTML i cel minimum 44 px. Zgodność zależy od końcowej strony, otoczenia, treści, działania i testów.

Nie. Etykieta i projekt pozostają w pamięci przeglądarki. Tryb wielostronicowy używa pamięci sesji tej samej karty i nie umieszcza wartości w URL ani żądaniach do serwera.

Przycisk służy do działań, takich jak wysłanie, otwarcie lub przełączenie. Do nawigacji użyj odsyłacza z prawdziwym href i w razie potrzeby zastosuj wygenerowaną klasę.

Edytor zgłasza błąd i pozostawia cały wynik zaznaczony w czytelnym polu do ręcznego skopiowania. Sukces pojawia się dopiero po zakończeniu Clipboard API.

Powiązane narzędzia

Generator konfiguracji webpack

Utwórz plik webpack.config.js dla webpacka 5 do czystego JavaScriptu, Reacta lub Vue: TypeScript, Babel, CSS lub Sass, obrazy, HtmlWebpackPlugin, serwer deweloperski i polecenie npm install.

Generator kolorów analogicznych

Twórz pięciokolorowe palety analogiczne z dowolnego koloru bazowego: klasyczną trójkę, dwie zewnętrzne barwy oraz wartości hex, RGB i HSL.

Generator fikcyjnych numerów telefonu

Generuj do 50 fikcyjnych numerów z oficjalnie zastrzeżonych zakresów w pięciu krajach.

Walidator XSD

Waliduj dokument XML wobec schematu XSD i zgłaszaj niezgodności elementów i typów z dokładnymi numerami wierszy.

Kod na obraz

Wklej kod, ustaw motyw, kolory, rozmiar czcionki, odstępy, nagłówek i numery wierszy, sprawdź podgląd canvas i pobierz PNG. Renderowanie zwykłego tekstu, bez podświetlania składni.

Dekoder Protocol Buffers

Dekoduj lokalnie bajty Protobuf z zapisu hex, Base64, Base64URL, tekstu lub pliku, analizuj pola i eksportuj prywatny raport.

Narzędzie jest dostępne w innych językach