<div class="button">Click Me!</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Exo", Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(to bottom, #0b0a27, #31304c 50%);
}

path {
  fill: #ea0700;
}

.button {
  width: 50vh;
  min-height: 15vh;
  cursor: pointer;
  background-image: radial-gradient(
      circle at 45% 67%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 16% 36%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 69% 64%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 88% 23%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 43% 26%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 66% 45%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 71% 41%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 89% 76%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 70% 62%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 57% 91%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 98% 4%,
      rgba(255, 255, 255, 0.01) 0%,
      rgba(255, 255, 255, 0.01) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 28% 61%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 48% 96%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 13% 61%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 44% 44%,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.03) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 20% 19%,
      rgba(255, 255, 255, 0.02) 0%,
      rgba(255, 255, 255, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    linear-gradient(135deg, rgb(76, 234, 243), rgb(92, 31, 127));

  border-radius: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.button::before {
  content: "";
  display: block;
  background-color: #fff;
  margin-right: 5px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.5));
  width: 36px;
  height: 36px;
  clip-path: path(
    "M26.8946059,11.0126393 C21.2892118,5.02527866 9,21.5 9,18.5 C9,15.5 19.1556529,0.0806130573 10.0778264,0.0401677435 C1,-6.09443052e-14 -1,35 1.21039013,36.9476513 C3.42078025,38.8953025 32.5,17 26.8946059,11.0126393 Z"
  );
  transition: clip-path 0.28s linear;
}

.button.active::before {
  clip-path: path(
    "M1.5,1 C-1,3 5,40.5 10.5,38 C16,35.5 5.5,14.5 10.5,15.5 C15.5,16.5 25.5,32.5 28,26.5 C30.5,20.5 4,-1 1.5,1 Z"
  );
  transition: clip-path 0.28s linear;
}
const button = document.querySelector(".button");

button.addEventListener("click", (e) => {
  e.target.classList.toggle("active");
});
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.