Softonic

CSS-knopgenerator

Stap 1 / 4 Knoptekst

Knoptekst

Voer een label als platte tekst in. HTML-achtige tekst wordt in het gegenereerde fragment veilig gecodeerd.

Ontwerp een knop en controleer standaard, hover, toetsenbordfocus, ingedrukt, uitgeschakeld en laden. Stel een effen of tweekleurig verloop, rand, ruimte, hoeken, schaduw en statuskleuren in. Het label wordt veilig gecodeerd, het ontwerp blijft in de browser en de uitvoer bevat semantische HTML en begrensde CSS.

Een CSS-knop genereren

  1. 1

    Schrijf het label

    Voer platte tekst in; HTML-achtige tekens blijven tekst.

  2. 2

    Stel het basisontwerp in

    Kies vulling, kleuren, grootte, binnenruimte, radius, rand en schaduw.

  3. 3

    Definieer statussen

    Stel hover, indrukken en focus in; uitgeschakeld en laden zijn inbegrepen.

  4. 4

    Controleer de aanwijzingen

    Bekijk tekst- en focuscontrast en het minimale doelvlak.

  5. 5

    Kopieer of download

    Kopieer HTML en CSS of download een zelfstandige UTF-8-HTML-pagina.

Inbegrepen statussen

De HTML gebruikt een echte <button type="button">. De CSS behandelt standaard, hover, toetsenbordfocus met :focus-visible, ingedrukt, de eigenschap disabled en laden met aria-busy="true". Je toepassing bepaalt wanneer een status geldt en welke actie wordt uitgevoerd.

Contrast en afmetingen

De berekening gebruikt het laagste contrast tussen tekst en basis-, verloop-, aanwijzings- en drukachtergrond. De doelen zijn 4,5:1 voor gewone tekst en 3:1 voor de focusrand op het lichte voorbeeldvlak. Controleer opnieuw in de uiteindelijke pagina.

De CSS dwingt minstens 44 bij 44 px af. Beweging verdwijnt als de gebruiker minder animatie verkiest; de laadindicator draait langzamer.

Veilige grenzen en privacy

Het label wordt genormaliseerd, beperkt tot 120 grafeemclusters en voor HTML gecodeerd. Kleuren moeten zes hexadecimale cijfers hebben en getallen worden begrensd. De volledige editor gebruikt browsergeheugen; de vier stappen gebruiken sessionStorage in het tabblad. Niets gaat naar de URL of de server.

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

Verwijder beide attributen na afloop en meld belangrijke resultaten in een geschikte statusregio.

Veelgestelde vragen

Nee. Hij biedt nuttige controles, maar conformiteit hangt af van de uiteindelijke pagina en tests.

Nee. Label en ontwerp blijven in de browser; de stappen gebruiken alleen sessieopslag in hetzelfde tabblad.

Een knop is voor acties. Gebruik voor navigatie een link met een echte href en pas zo nodig de visuele klasse toe.

De uitvoer wordt geselecteerd voor handmatig kopiëren en succes verschijnt pas na de echte bewerking.

Gerelateerde tools

ASCII-tabelreferentie

Volledige ASCII-tabel van 0 tot 127 met decimale, hexadecimale, octale en binaire waarden en HTML-numerieke referentienotatie, inclusief control codes zoals NUL, LF en DEL.

HTML-tekenreferentie

Een doorzoekbare lijst met HTML-entiteiten, hun benoemde en numerieke codes, plus kopiëren met één klik voor speciale tekens en symbolen.

Sneltoetsenoverzicht

Zoek gedocumenteerde standaardsneltoetsen voor VS Code, Chrome en Bash met GNU Readline op macOS, Windows en Linux.

EditorConfig-generator

Genereer een .editorconfig-bestand met uw regels voor inspringstijl en -grootte, regeleinde, tekenset en witruimte voor consistente opmaak in alle IDE's en editors.

E-mailvalidator

Valideer een e-mailadres: RFC 5322-syntaxcontrole, live MX-record-zoekopdracht, plus details over lokaal deel, domein en lengte. Er wordt geen e-mail verstuurd.

ASCII naar binair-converter

Converteer elke ASCII-string naar zijn binaire representatie. Elk teken wordt acht bits, gescheiden door spaties, klaar voor protocoltrace of huiswerk.

Tool beschikbaar in andere talen