1<label class="cbx">2 <input type="checkbox" checked />3 <span class="box"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M20 6 9 17l-5-5"/></svg></span>4 <span class="lbl">Newsletter abonnieren</span>5</label>Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.
Aus derselben Kategorie oder mit passenden Tags.
Melde dich an, um zu kommentieren.
Ein breiterer Toggle-Switch mit integrierter "AN" und "AUS" Textanzeige. Der Text blendet geschmeidig über, passend zum Status. Die Logik nutzt Event-Delegation, damit auch dynamisch geladene Toggles sofort ohne Re-Binding funktionieren. Völlig freistehend.
Ein flüssiger, barrierefreier Toggle-Switch basierend auf einer versteckten nativen Checkbox. Bietet Tastatur-Unterstützung (Fokus-Status), einen "Squish"-Effekt beim aktiven Klicken und geschmeidige cubic-bezier Animationen. Völlig freistehend ohne umgebenden Hintergrund.