<button class="ccb-fold" aria-label="Close"><span></span><span></span></button>

.ccb-fold {
  width: 40px; height: 40px;
  border: none; border-radius: 8px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  position: relative; cursor: pointer;
  perspective: 200px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.65,0,0.35,1);
}
.ccb-fold span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #fff; border-radius: 2px;
  backface-visibility: hidden;
}
.ccb-fold span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-fold span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-fold:hover  { transform: rotateY(75deg); }
.ccb-fold:active { transform: rotateY(180deg); }