Sprudel-Button
Ein glänzender Button, in dem beim Hover Bläschen aufsteigen wie in einer frisch eingeschenkten Limonade.
Einstellungen
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">Jetzt bestellen</span></button>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Buttons
Alle ansehen: ButtonsWofür du ihn nutzen kannst
Ein Dutzend Bläschen in verschiedenen Größen wartet unter dieser glänzenden Pille und steigt hindurch, solange der Zeiger darauf bleibt. Jedes hat eigenes Tempo und eigene Verzögerung, der Strom wirkt deshalb nie synchron. Das Glanzlicht oben vervollständigt den Getränke-Look. Ideal für Getränkemarken, Essenslieferung, Sommerkampagnen und freundliche Bestell-Buttons.
Kühle Farben wie Cyan, Limette oder Himbeere wirken frisch. Die Geschwindigkeit bestimmt, wie lebhaft es sprudelt. Bei reduzierter Bewegung bleiben die Bläschen still, übrig bleibt ein sauberer, glänzender Button.