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

Webpack-configuratiegenerator

Maak een webpack.config.js voor webpack 5 vanuit een kort formulier: stel entry, uitvoermap en mode in en zet TypeScript, Babel, een CSS-loader, HtmlWebpackPlugin en een dev-server aan.

JSON naar PHP-array

Zet JSON om naar een PHP-array-literal met korte syntaxis, associatieve/geïndexeerde arrays en geneste structuren, klaar om in een .php-bestand te plakken.

Telefoonnummers controleren

Controleer de structuur van telefoonnummers per land en bekijk regio, type en E.164-, internationale, nationale en RFC 3966-notatie.

SVG-golfgenerator

Genereer een vloeiende SVG-golfscheiding voor headers en footers met instelbare amplitude, frequentie, kleur en positie boven of onder. Kopieer de SVG-code.

Luhn-algoritme-checker

Controleer de creditcardnummer, IMEI, SIN en andere door Luhn beschermden nummers. Geef een resultaat terug (goed of fout) en toon elke stap van het verdubbelen en het berekenen van de controlesom aan.

Sneltoetsenoverzicht

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

Tool beschikbaar in andere talen