<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.