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

.ccb-magnet {
  width: 38px; height: 38px;
  border: 1px solid rgba(124,108,255,0.3);
  border-radius: 8px;
  background: #17171f;
  position: relative; cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.ccb-magnet span {
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 2px;
  background: #7c6cff; border-radius: 2px;
  transition: width 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ccb-magnet span:nth-child(1) { transform: translate(-130%,-50%) rotate(0deg); }
.ccb-magnet span:nth-child(2) { transform: translate(30%,-50%)   rotate(0deg); }
.ccb-magnet:hover { border-color: #7c6cff; background: rgba(124,108,255,0.08); }
.ccb-magnet:hover span { width: 16px; }
.ccb-magnet:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-magnet:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }