Fizzy bubble button
A glossy button that fills with rising bubbles on hover, like a freshly poured soft drink.
Settings
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">Order now</span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
See all ButtonsWhere to use it
A dozen bubbles of different sizes wait below this glossy pill and float up through it while the pointer stays on top, each with its own speed and delay so the stream never looks synchronized. The glass highlight at the top completes the drink look. Great for beverage brands, food delivery, summer campaigns and friendly order buttons.
Cool colors like cyan, lime or raspberry read as fresh. Speed controls how lively the fizz feels, and with reduced motion enabled the bubbles stay still, leaving a clean glossy button that still invites a click.