Sélecteur à pastille glissante
Une pastille colorée glisse derrière les options et s’ajuste à la largeur de celle que vous cliquez.
Réglages
Code
<div class="uv-rds"><span class="p"></span><button class="on">Mensuel</button><button>Annuel</button><button>À vie</button></div>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 Boutons radio
Où l’utiliser
C’est l’interrupteur que l’on voit sur presque toutes les pages de tarifs : paiement mensuel, annuel ou à vie. Il sert aussi pour « Livraison / À emporter » sur le site d’un restaurant ou pour passer de la carte à la liste dans une recherche immobilière. La pastille s’adapte à chaque libellé. Un sélecteur segmenté en HTML, CSS et un peu de JavaScript.
Limitez-vous à deux, trois ou quatre options courtes au maximum ; au-delà, la pastille voyage trop et les libellés se serrent. Si l’abonnement annuel est moins cher, dites-le dans le libellé, par exemple « Annuel −20 % ».