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.

Etykieta i projekt pozostają w tej przeglądarce. Strony trybu krokowego używają pamięci sesji i nie umieszczają treści w URL.

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ń Livewire.

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 Livewire.

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

Konwerter Base64 na Hex

Konwertuj ciąg Base64 na jego bazowe bajty zapisane szesnastkowo. Przydatne do inspekcji tokenów, kluczy, certyfikatów i JWT.

Konwerter binarny na hex

Konwertuj wejście binarne na zwykłą wartość szesnastkową wielkimi literami. Znaki inne niż 0 i 1 są ignorowane, a zera wiodące nie są zachowywane.

Konwerter ASCII na binarny

Konwertuj dowolny ciąg ASCII na reprezentację binarną. Każdy znak staje się ośmioma bitami, rozdzielonymi spacjami, gotowymi do wklejenia w ślad protokołu albo zadanie domowe.

Konwerter binarnego na ósemkowy

Konwertuj binarny na ósemkowy, grupując bity po trzy. Przydatne przy uprawnieniach Unix, starszych systemach i kompaktowym zapisie liczb.

Konwerter binarnego na ASCII

Wklej zapis binarny (bajty rozdzielone spacjami albo długi strumień bitów) i otrzymaj tekst ASCII, który reprezentuje. Obsługuje kodowania 7-bitowe i 8-bitowe.

Generator losowych liter

Generuj losowe litery A-Z. Wybierz liczbę, wielkie litery, małe litery lub zapis mieszany i użyj wyniku w grach, zadaniach lub lekcjach.