<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');
  });
});