Wackelpudding-Checkbox

Das Kästchen wackelt beim Anhaken wie Götterspeise und füllt sich mit saftiger, glänzender Farbe.

Einstellungen

Hauptfarbe#16b5a0

Zweitfarbe#b8fff1

Größe16px

Tempo1x

Text

Code

index.html

<label class="uv-cjl"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Angebote erhalten</label>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Checkboxen

Alle ansehen: Checkboxen

Checkbox mit gezeichnetem Haken

CheckboxenHTML + CSS

Runde Checkbox

CheckboxenHTML + CSS

Checkbox mit Konfetti

CheckboxenHTML + CSS

Aufgabe zum Durchstreichen

CheckboxenHTML + CSS

3D-Checkbox zum Umdrehen

CheckboxenHTML + CSS

Herz als Like-Button

CheckboxenHTML + CSS

Checkbox mit Häkchen und Federeffekt

CheckboxenHTML + CSS

Checkbox mit Kreisfüllung

CheckboxenHTML + CSS

Wofür du ihn nutzen kannst

Ein wenig Stauchen und Strecken lässt eine normale Einwilligungs-Checkbox freundlich wirken. Beim Anhaken quetscht, dehnt und neigt sie sich kurz wie ein Würfel Wackelpudding und kommt dann mit glänzendem Licht und einem weißen Haken zur Ruhe. Passt zu Newsletter-Anmeldungen, verspielten Einstellungsseiten und Marken für Essen oder Süßigkeiten.

Mint und Türkis wirken leicht, Beerentöne süß. Das Wackeln läuft nur beim Anhaken, lange Formulare bleiben also ruhig, und bei reduzierter Bewegung ändert sich nur die Farbe.