CSS-knappgenerator

Det här ingår i den genererade koden

HTML-koden använder ett riktigt <button type="button">-element med den synliga texten i ett span-element. CSS-koden omfattar sex användbara tillstånd:

• Standard för knappens normala viloläge
• Hovring för enheter med pekare
• Tangentbordsfokus via :focus-visible
• Aktiv medan knappen trycks ned
• Inaktiv via den inbyggda egenskapen disabled
• Laddning via aria-busy="true"

Det är fortfarande din applikation som avgör när knappen ska vara inaktiv eller upptagen. Generatorn tillhandahåller presentationsreglerna. Den skapar inte applikationstillstånd och kopplar inte någon åtgärd till ett klick.

Kontrastvägledningen är en kontroll, inte ett intyg

Redigeraren beräknar den lägsta textkontrasten bland grundfärgen, toningens slutfärg, hovringsfärgen och den aktiva färgen. Målvärdet för normal text är 4,5:1. Den jämför också fokusramen med den ljusa förhandsvisningsytan och använder 3:1 som mål för grafiska objekt.

Värdena hjälper dig att hitta vanliga problem, men den färdiga sidan kan placera knappen på en annan yta. Kontrollera fokus- och kantkontrasten på nytt i den verkliga layouten. Inaktiva kontroller visas med lägre opacitet och behöver en tydlig förklaring i närheten när syftet inte är uppenbart.

Målyta och rörelse

Den exporterade regeln kräver en minsta bredd och höjd på 44 px. Det är en bekväm målyta för många pekgränssnitt och större än minimikravet på 24 CSS-px i WCAG 2.2, framgångskriterium 2.5.8. Layout, avstånd, undantag och plattformsriktlinjer har fortfarande betydelse i slutprodukten.

Förflyttningen vid hovring och nedtryckning tas bort när användaren har begärt minskad rörelse. Laddningsindikatorn blir långsammare i stället för att försvinna, så det upptagna tillståndet förblir synligt.

Gränser för säker utdata

Den synliga texten normaliseras, begränsas till 120 grafemkluster, rensas från osynliga riktningsstyrande tecken och HTML-kodas i kodutdraget och nedladdningen. Färger måste anges som sexsiffriga hexadecimala värden. Varje numerisk inställning avrundas och begränsas till intervallet som visas vid kontrollen.

Hela redigeraren arbetar i webbläsarens minne. I det valfria flödet med fyra sidor lagras en versionsmärkt design i sessionStorage för den aktuella fliken. Knapptexten och designvärdena placeras inte i flödets URL:er och skickas inte till våra servrar.

Använda laddningstillståndet

Lägg till och ta bort upptagen-attributet från applikationskoden:

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

aria-busy meddelar att en uppdatering pågår. Lägg även till disabled när upprepad aktivering måste förhindras. När åtgärden är klar tar du bort båda attributen och flyttar viktiga meddelanden om resultat eller fel till en lämplig statusregion.