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

.ccb-liquid {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, #7c6cff, #a78bfa);
  position: relative; cursor: pointer;
  transition: border-radius 0.4s cubic-bezier(0.68,-0.55,0.27,1.55), transform 0.4s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.ccb-liquid span {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.68,-0.55,0.27,1.55);
}
.ccb-liquid span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
.ccb-liquid span:nth-child(2) { transform: translate(-50%,-50%) rotate(-45deg); }
.ccb-liquid:hover { border-radius: 30% 70% 70% 30% / 50% 50% 50% 50%; transform: scale(0.92); }
.ccb-liquid:hover span:nth-child(1) { transform: translate(-50%,-50%) rotate(135deg) scaleX(1.15); }
.ccb-liquid:hover span:nth-child(2) { transform: translate(-50%,-50%) rotate(-135deg) scaleX(1.15); }