Puerta principal
Cerrada
Mantén pulsado para abrirSe cerrará sola en unos segundos
86 %
HTML + CSSCards
Press and hold smart lock
A smart lock card: hold the button, the ring fills, the shackle pops open and it locks itself again a few seconds later.
Settings
16px
1x
Code
<article class="uvq07-lck"><header><div><h3>Front door</h3><p class="st"><i></i><span aria-live="polite" data-a="Locked" data-b="Unlocked">Locked</span></p></div><span class="bt"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="7" width="16" height="10" rx="2"/><path d="M21 10.5v3"/><rect x="5" y="9" width="10" height="6" rx="1" fill="currentColor" stroke="none"/></svg>86 %</span></header><button type="button" class="hb" aria-label="Press and hold to unlock"><svg class="rg" viewBox="0 0 100 100" aria-hidden="true"><circle class="tr" cx="50" cy="50" r="46"/><circle class="pr" cx="50" cy="50" r="46" pathLength="1"/></svg><svg class="lk" viewBox="0 0 24 24" aria-hidden="true"><path class="sh" d="M8 11V7.5a4 4 0 0 1 8 0V11"/><rect x="5" y="11" width="14" height="10" rx="2.5"/><circle cx="12" cy="16" r="1.3"/></svg></button><p class="hn"><span class="h1">Press and hold to unlock</span><span class="h2">It will lock itself in a few seconds</span></p><footer>Last opened: Marta, 18:04</footer></article>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 Cards
See all CardsWhere to use it
Unlocking a door should take a deliberate gesture, and press and hold is the classic answer. A ring around the lock fills while you hold with pointer, Space or Enter, releasing early rewinds it, and completing it pops the shackle with a springy curve before the ring drains as an auto-lock timer. Good for smart home apps, access control and any confirm action.
The main color is the progress ring and open state, the second the graphite card. Change the hold time in the CSS transition and the relock delay in the script.