HTML + CSSButtons
Color mesh button
Soft color blobs drift and blend under a frosted layer, with a sparkle icon that spins on hover.
Settings
16px
1x
14px
Code
<button class="uv-msh"><span class="m" aria-hidden="true"><i></i><i></i><i></i></span><span class="t"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l1.9 5.6L19.5 9.5l-5.6 1.9L12 17l-1.9-5.6L4.5 9.5l5.6-1.9zM19 15l.9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9z"/></svg>Create with AI</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
Mesh gradients are the signature look of AI products and creative tools, and this button keeps one alive inside a pill: three blurred blobs drift slowly in different directions while a light glass layer sits on top. The sparkle icon turns on hover, a familiar cue for generate, magic or create actions.
Choose two contrasting colors for a vivid mix and use the blur slider to go from defined shapes to a dreamy wash. Keep the text white and short so it stays legible over the moving colors.