HTML + CSSCheckboxen

Checkbox mit Funkenregen

Acht kleine Funken fliegen aus der Box, sobald du sie anklickst. Eine Mini-Feier für jeden Haken.

Einstellungen

16px
1x

Code

<label class="uv-ck2b"><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"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg><em><b style="--a:0deg"></b><b style="--a:45deg"></b><b style="--a:90deg"></b><b style="--a:135deg"></b><b style="--a:180deg"></b><b style="--a:225deg"></b><b style="--a:270deg"></b><b style="--a:315deg"></b></em></span>Gefällt mir</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

Wofür du ihn nutzen kannst

Funken passen, wenn das Abhaken ein kleiner Erfolg oder ein Zeichen von Zuneigung ist: das „Gefällt mir“ bei einem Rezept, ein Produkt auf der Wunschliste oder die erledigte Tagesgewohnheit in einer Habit-Tracker-App. Der kleine Ausbruch belohnt den Klick und macht Lust auf mehr. Eine Checkbox mit Partikel-Animation in HTML und CSS.

Lass sie aus ernsten Formularen raus. Niemand will Konfetti, wenn er einer Datenschutzerklärung zustimmt oder eine Versicherung auswählt. Die Funken übernehmen die Akzentfarbe und wirken deshalb auch auf dunklem Hintergrund gut.