Bouton pétillant
Un bouton brillant qui se remplit de bulles montantes au survol, comme une boisson tout juste servie.
Réglages
Code
<button class="uv-sod"><span class="bb" aria-hidden="true"><i style="--x:4%;--z:0.35em;--t:1.60s;--dl:0.00s"></i><i style="--x:41%;--z:0.54em;--t:2.77s;--dl:0.71s"></i><i style="--x:78%;--z:0.72em;--t:2.43s;--dl:1.43s"></i><i style="--x:23%;--z:0.91em;--t:2.10s;--dl:0.57s"></i><i style="--x:60%;--z:0.47em;--t:1.77s;--dl:1.29s"></i><i style="--x:5%;--z:0.66em;--t:2.93s;--dl:0.43s"></i><i style="--x:42%;--z:0.85em;--t:2.60s;--dl:1.14s"></i><i style="--x:79%;--z:0.41em;--t:2.27s;--dl:0.29s"></i><i style="--x:24%;--z:0.60em;--t:1.93s;--dl:1.00s"></i><i style="--x:61%;--z:0.79em;--t:1.60s;--dl:0.14s"></i><i style="--x:6%;--z:0.35em;--t:2.77s;--dl:0.86s"></i><i style="--x:43%;--z:0.54em;--t:2.43s;--dl:0.00s"></i></span><span class="t">Commander</span></button>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
Voir tout : BoutonsOù l’utiliser
Une douzaine de bulles de tailles différentes attendent sous cette pilule brillante et la traversent tant que le pointeur reste dessus, chacune avec sa vitesse et son délai pour que le flux ne paraisse jamais synchronisé. Le reflet de verre en haut complète l'effet boisson. Parfait pour les marques de boissons, la livraison de repas, les campagnes d'été et les boutons de commande sympathiques.
Les couleurs fraîches comme le cyan, le citron vert ou la framboise évoquent la fraîcheur. La vitesse règle le pétillement et, avec le mouvement réduit, les bulles restent immobiles pour un bouton net et brillant.