18 CSS Close Buttons 02 / 18
Lock Tumble
A padlock chrome with a shackle that tumbles open on click — the X aligns into the lock body as it unlocks.
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> <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; } .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');
});
}); document.querySelectorAll('.ccb-lock').forEach(function(btn) {
btn.addEventListener('click', function() {
btn.classList.toggle('is-open');
});
});