HTML + CSSBoutons radio
Radio à remplissage liquide
La couleur monte dans le cercle comme de l’eau, et sa surface ondulée continue de tourner doucement.
Réglages
16px
1x
Code
<div class="uv-rdl"><label><input type="radio" name="rdl" checked><span class="rb"><i></i></span>Eau</label><label><input type="radio" name="rdl"><span class="rb"><i></i></span>Jus</label><label><input type="radio" name="rdl"><span class="rb"><i></i></span>Café</label></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
Voir tout : Boutons radioOù l’utiliser
Un bouton radio qui se remplit comme un verre va naturellement avec tout ce qui se boit : choisir eau, jus ou café dans l’application de commande d’un café, le lait du latte ou la taille d’un smoothie. Il convient aussi à une application qui suit votre hydratation. Un bouton radio liquide en CSS avec un dégradé à deux couleurs.
La vague continue de bouger tant que l’option est choisie : réservez-le aux écrans avec peu d’options. Prenez deux nuances d’une même couleur pour le dégradé, le rendu ressemble davantage à un vrai liquide.