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
Où 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.