HTML + CSSInterrupteurs

Interrupteur fermeture éclair

Le curseur glisse sur un morceau de denim et les dents en laiton se referment une à une derrière lui.

Réglages

16px
1x

Code

<label class="uvq03-zip"><input type="checkbox" role="switch"><span class="fb"><span class="tt"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i></span><span class="tb"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i></span><span class="pl"><i></i></span></span>Mode privé</label>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Interrupteurs

Voir tout : Interrupteurs

Où l’utiliser

Cet interrupteur est une fermeture éclair miniature : du denim surpiqué, deux rangées de dents en laiton et un curseur avec sa tirette. À l’activation, le curseur avance vers la droite et chaque dent se ferme avec un léger décalage, si bien que la fermeture se scelle derrière lui. La tirette se balance à l’arrêt. Il convient aux réglages de confidentialité, dossiers verrouillés et marques de mode.

La couleur principale est le tissu, la seconde le métal des dents. Essayez une toile kaki avec des dents argentées ou un cuir noir avec du doré, et gardez un libellé court, car la fermeture est déjà large.