HTML + CSSButtons
Letter wave button
On hover each letter hops and changes color a beat after the one before, like a small wave.
Settings
16px
1x
Code
<button class="uv-lwv" aria-label="Start for free"><span class="t" translate="no" aria-hidden="true">Start for free</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
This call to action splits its own label into letters with a few lines of JavaScript, then a CSS animation makes them jump one after another with a slight tilt. The button keeps an aria-label with the full text, so screen readers hear a normal word. It works well on landing pages for apps, games and creative studios.
Short labels of two or three words give the nicest wave. The second color is the tint each letter takes at the top of its jump, so a warm accent on a cool button reads clearly without extra effects.