Ember Latch Button
A charcoal latch button with a warm ember glow under it and a soft sheen on its face, made for secure actions.
Preview and code
index.html
<button class="latch" type="button"><span class="latch__t">Unlock</span></button>
styles.css
.latch{position:relative;overflow:hidden;padding:18px 40px;border:1px solid #303030;border-radius:18px;background:linear-gradient(#3b3b3e,#1c1c1e);color:#f5f5f7;font:600 17px/1 system-ui,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 30px rgba(0,0,0,.65),0 16px 28px -10px rgba(255,110,40,.4);transition:transform .15s ease,box-shadow .15s ease}
.latch::before{content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:55%;background:radial-gradient(60% 100% at 50% 100%,rgba(255,120,50,.6),rgba(255,120,50,0));pointer-events:none}
.latch::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,0));pointer-events:none}
.latch__t{position:relative;z-index:1}
.latch:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.6),0 10px 20px -10px rgba(255,110,40,.5)}
.latch:focus-visible{outline:2px solid #ff8a4c;outline-offset:4px}
script.js
const b=document.querySelector('.latch'),t=b.querySelector('.latch__t');let on=false;
b.addEventListener('click',()=>{on=!on;t.textContent=on?'Unlocked':'Unlock';});About
Dark button for unlock, confirm or secure-action calls to action. The glow is a radial gradient on a pseudo-element, so it needs no image. Click to toggle the label.