Mechanical keycap button
A sculpted keycap on a keyboard plate that travels down for real and sends a ring of light across the plate.
Settings
Code
<div class="uvq01-key"><span class="rp" aria-hidden="true"></span><button class="k" type="button"><span class="cap"><span class="t">Send</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 5v7a3 3 0 0 1-3 3H6"/><path d="M10 11l-4 4 4 4"/></svg></span></button></div>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
Mechanical keyboards have a loyal fan base, and this button borrows their look: a sculpted keycap with a concave top and legend, sitting on an anodized plate with colored underglow. Each press drops the cap with real key travel and fires a reactive light ripple, also when you use Enter or Space. It suits developer tools, keyboard shortcut hints and gaming sites.
Use the main color for the keycap, like a classic orange Escape key, and the secondary color for the RGB glow. Short labels such as Send, Run or Enter look most natural, and a few of these together make a convincing shortcut legend.