Climbing carabiner button
The carabiner gate swings open on hover; on press the locking sleeve slides up, the rope gets a tug and it is secured.
Settings
Code
<button class="uvq01-crb" type="button" aria-label="Secure" aria-pressed="false"><svg viewBox="0 0 40 60" aria-hidden="true"><g class="rpg"><path class="rp" d="M-2 57C8 45 32 45 42 57"/><path class="rp2" d="M-2 57C8 45 32 45 42 57"/></g><path class="bd" d="M6 16a10 10 0 0 1 10-10h8a10 10 0 0 1 10 10v28a10 10 0 0 1-10 10h-8a10 10 0 0 1-10-10"/><g class="gt"><path d="M6 18v25"/><rect class="sl" x="3" y="33" width="6" height="9" rx="1.8"/></g></svg><span class="w" aria-hidden="true"><span class="a">Secure</span><span class="b">Secured</span></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 toggle taken from a climbing harness: an anodized orange carabiner with a rope running through it sits next to the label. Hovering pushes the spring gate inwards, and pressing slides the locking sleeve over the nose, tugs the rope and swaps the label to its secured state. While locked, the gate only twitches when you hover. It suits climbing gyms, outdoor shops and safety settings.
The main color is the anodized aluminium and the secondary color is the rope, so a blue carabiner with a red rope is a quick change. The state is exposed with aria-pressed, and reduced motion keeps every change instant.