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

.ccb-snap {
  width: 38px; height: 38px;
  border: 1px solid rgba(245,166,35,0.3);
  border-radius: 8px;
  background: rgba(245,166,35,0.12);
  position: relative; cursor: pointer; overflow: hidden;
  transition: background 0.2s;
}
.ccb-snap:hover { background: rgba(245,166,35,0.22); }
.ccb-snap span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 2px;
  background: #f5a623; border-radius: 2px;
  animation: ccb-snap-tl 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.ccb-snap span:nth-child(1) { animation-name: ccb-snap-tl; }
.ccb-snap span:nth-child(2) { animation-name: ccb-snap-tr; animation-delay: 0.05s; }
@keyframes ccb-snap-tl {
  0%       { transform: translate(-300%,-300%) rotate(45deg); opacity: 0; }
  60%,100% { transform: translate(-50%,-50%)   rotate(45deg); opacity: 1; }
}
@keyframes ccb-snap-tr {
  0%       { transform: translate(200%,-300%)  rotate(-45deg); opacity: 0; }
  60%,100% { transform: translate(-50%,-50%)   rotate(-45deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ccb-snap,
  .ccb-snap * {
    animation: none !important;
  }
}