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

.ccb-origami {
  width: 40px; height: 40px;
  border: none;
  background: linear-gradient(135deg, #f0eeff 0%, #e8e4ff 50%, #d4ccff 51%, #c4b8ff 100%);
  position: relative; cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.45s cubic-bezier(0.65,0,0.35,1), transform 0.45s;
  box-shadow: 0 2px 6px rgba(60,40,140,0.2), inset -1px -1px 0 rgba(0,0,0,0.04);
}
.ccb-origami span {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 1.5px;
  background: #1a1a2e; border-radius: 1px;
  box-shadow: 0 0.5px 0 rgba(255,255,255,0.6);
}
.ccb-origami span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-origami span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-origami:hover {
  clip-path: polygon(50% 12%, 88% 50%, 50% 88%, 12% 50%);
  transform: rotate(45deg) scale(0.9);
}
.ccb-origami:active {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transform: rotate(90deg) scale(0.6);
}