Pill Text Toggle – CSS-Komponente zum Kopieren · Elementa

Pill Text Toggle

Pillenförmiger Schalter mit sichtbaren Statustexten AN und AUS, der im aktiven Zustand in einem Violett-Fuchsia-Verlauf erstrahlt und barrierefrei bedienbar bleibt.

B@BelkisCSS WCAG 2.2 2026-07-01

#toggle #switch #pill #label #dark

Live-Vorschau

Code — zum Kopieren & Einfügen

1<div class="el-pill-wrap">
2  <label class="el-pill-toggle" aria-label="An oder Aus">
3    <input type="checkbox">
4    <span class="el-pill-track">
5      <span class="el-pill-on">AN</span>
6      <span class="el-pill-off">AUS</span>
7      <span class="el-pill-knob"></span>
8    </span>
9  </label>
10</div>

Eingebaut in 60 Sekunden

Keine Installation, kein Build-Step — reine Standards, sofort einsatzbereit.

1
Code kopieren
Klicke oben auf „Code kopieren“ — HTML und CSS landen in deiner Zwischenablage.
2
In dein Projekt einfügen
Füge das Markup an der gewünschten Stelle deiner Seite oder Komponente ein.
3
CSS übernehmen
Übernimm den <style>-Block bzw. die Klassen in deine Stylesheet-Datei.

@Belkis

… Komponenten … Likes

Profil

Kommentare

Melde dich an, um zu kommentieren.

Pill Text Toggle

Code — zum Kopieren & Einfügen

Eingebaut in 60 Sekunden

Code kopieren

In dein Projekt einfügen

CSS übernehmen

Ähnliche Komponenten

Kommentare

Gradient Brand Toggle

iOS Style Toggle

Day and Night Toggle

Neon Glow Toggle