Lock Tumble
A padlock chrome with a shackle that tumbles open on click — the X aligns into the lock body as it unlocks. Premium choice for "remove from saved" and "unlock to dismiss" flows.
Lock Tumble the 2nd of 18 designs in the 18 CSS Close Buttons collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="ccb-lock" aria-label="Unlock and close">
<span class="ccb-lock-shackle"></span
><span class="ccb-lock-body"
><span class="ccb-lock-x1"></span><span class="ccb-lock-x2"></span
></span>
</button> .ccb-lock {
width: 40px; height: 48px;
border: none; background: transparent;
position: relative; cursor: pointer;
padding: 0;
}
.ccb-lock-shackle {
position: absolute; top: 4px; left: 50%;
width: 20px; height: 18px;
border: 2.5px solid #f5a623;
border-bottom: none;
border-radius: 10px 10px 0 0;
transform: translateX(-50%);
transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s;
transform-origin: bottom right;
}
.ccb-lock-body {
position: absolute; bottom: 0; left: 50%;
width: 30px; height: 26px;
background: #f5a623;
border-radius: 5px;
transform: translateX(-50%);
transition: background 0.3s;
}
.ccb-lock-x1, .ccb-lock-x2 {
position: absolute; top: 50%; left: 50%;
width: 12px; height: 2px;
background: #1a1a2e; border-radius: 1px;
transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-lock-x1 { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-lock-x2 { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-lock.is-open .ccb-lock-shackle {
transform: translateX(-50%) rotate(40deg) translate(4px,-2px);
border-color: #2ecc8a;
}
.ccb-lock.is-open .ccb-lock-body { background: #2ecc8a; }
.ccb-lock.is-open .ccb-lock-x1 { transform: translate(-50%,-50%) rotate(0deg) scaleX(1.1); }
.ccb-lock.is-open .ccb-lock-x2 { transform: translate(-50%,-50%) rotate(90deg) scaleX(1.1); }
.ccb-lock:hover .ccb-lock-shackle { border-color: #fbbf24; } document.querySelectorAll('.ccb-lock').forEach(function(btn) {
btn.addEventListener('click', function() {
btn.classList.toggle('is-open');
});
});