Toggle mensuel ou annuel

Passe d'une facturation mensuelle à annuelle et un badge d'économie apparaît avec un petit rebond.

Réglages

Couleur principale#5b5bf7

Couleur secondaire#15b981

Taille16px

Vitesse1x

Texte

Code

index.html

<label class="uv-tbi"><input type="checkbox" role="switch"><span class="m">Mensuel</span><span class="tr"><span class="kn"></span></span><span class="y">Annuel</span><span class="sv">Économisez 20 %</span></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.

Plus dans Interrupteurs

Voir tout : Interrupteurs

Toggle iOS élastique

InterrupteursHTML + CSS

Toggle jour et nuit

InterrupteursHTML + CSS

Interrupteur ON / OFF

InterrupteursHTML + CSS

Interrupteur néon

InterrupteursHTML + CSS

Toggle croix et coche

InterrupteursHTML + CSS

Toggle néomorphique

InterrupteursHTML + CSS

Interrupteur mural

InterrupteursHTML + CSS

Toggle liquide

InterrupteursHTML + CSS

Où l’utiliser

Chaque page de tarifs a besoin de ce contrôle, et le badge oriente vers l'offre annuelle. Les deux libellés encadrent l'interrupteur et l'actif devient pleinement opaque. Quand l'annuel est choisi, une pilule verte avec la remise arrive en tournant avec un ressort, impossible de rater l'économie.

Écris le badge avec le champ de texte, par exemple Économisez 20 % ou Deux mois offerts. C'est une seule case à cocher, tu peux donc lire son état dans un formulaire ou la relier à ta grille tarifaire en quelques lignes.