Bottle Cap

<button class="btn-sig-cap" type="button">
  <span class="btn-sig-cap__cap">
    <span class="btn-sig-cap__face">Pop</span>
  </span>
</button>

.btn-sig-cap {
  --btn-bg: #d7263d;
  --btn-fg: #fff4dc;
  --btn-font: inherit;
  --btn-size: 15px;
  --btn-weight: 800;
  --btn-w: 104px;
  --btn-h: 104px;
  --btn-bw: 0px;
  --btn-line: #8b6cff;
  --btn-radius: 10px;
  --btn-speed: 180ms;
}

.btn-sig-cap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  box-sizing: border-box;
  width: var(--btn-w);
  height: var(--btn-h);
  padding: 0;
  font-family: var(--btn-font);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  line-height: 1.2;
  color: var(--btn-fg);
  background: none;
  border: var(--btn-bw) solid var(--btn-line);
  border-radius: var(--btn-radius);
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--btn-speed) ease;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.4));
}

.btn-sig-cap:focus-visible {
  outline: 2px solid var(--btn-bg);
  outline-offset: 2px;
}

.btn-sig-cap:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn-sig-cap__icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.btn-sig-cap:hover {
  transform: rotate(-10deg);
}

.btn-sig-cap[data-state=stamped] {
  animation: btn-pop 720ms ease-out;
}

.btn-sig-cap__cap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: conic-gradient(#e6e6ea, #8a8a93, #f5f5f7, #7c7c85, #e6e6ea, #8a8a93, #f5f5f7, #7c7c85, #e6e6ea);
  clip-path: polygon(100.0% 50.0%, 93.5% 56.6%, 97.8% 64.7%, 89.6% 69.1%, 91.3% 78.2%, 82.3% 79.9%, 81.2% 89.1%, 72.0% 88.1%, 68.3% 96.5%, 59.8% 92.9%, 53.7% 99.9%, 46.7% 93.9%, 38.9% 98.7%, 33.9% 91.0%, 25.0% 93.3%, 22.6% 84.4%, 13.3% 84.0%, 13.6% 74.8%, 5.0% 71.7%, 8.0% 63.0%, 0.6% 57.5%, 6.0% 50.0%, 0.6% 42.5%, 8.0% 37.0%, 5.0% 28.3%, 13.6% 25.2%, 13.3% 16.0%, 22.6% 15.6%, 25.0% 6.7%, 33.9% 9.0%, 38.9% 1.3%, 46.7% 6.1%, 53.7% 0.1%, 59.8% 7.1%, 68.3% 3.5%, 72.0% 11.9%, 81.2% 10.9%, 82.3% 20.1%, 91.3% 21.8%, 89.6% 30.9%, 97.8% 35.3%, 93.5% 43.4%);
}

.btn-sig-cap__face {
  display: grid;
  place-items: center;
  width: 74%;
  height: 74%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--btn-bg) 76%, #fff), var(--btn-bg) 62%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}

@keyframes btn-pop {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-34px) rotate(200deg); }
  70% { transform: translateY(0) rotate(360deg); }
  85% { transform: translateY(-7px) rotate(370deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-sig-cap {
    animation: none !important;
    transition: none !important;
  }
}

document.querySelectorAll(".btn-sig-cap").forEach((el) => {
  const land = () => {
    el.removeAttribute("data-state");
    void el.offsetWidth;
    el.dataset.state = "stamped";
  };
  const clear = () => el.removeAttribute("data-state");
  el.addEventListener("click", land);
  el.addEventListener("animationend", clear);
  return () => {
    el.removeEventListener("click", land);
    el.removeEventListener("animationend", clear);
  };
});

import { useEffect, useRef } from "react";
import type React from "react";
import "./sig-cap.css"; // the CSS tab

function attach(el: HTMLElement) {
  const land = () => {
    el.removeAttribute("data-state");
    void el.offsetWidth;
    el.dataset.state = "stamped";
  };
  const clear = () => el.removeAttribute("data-state");
  el.addEventListener("click", land);
  el.addEventListener("animationend", clear);
  return () => {
    el.removeEventListener("click", land);
    el.removeEventListener("animationend", clear);
  };
}

export function BtnSigCap({ children = "Pop", ...props }: React.ComponentProps<"button">) {
  const ref = useRef<HTMLButtonElement>(null);
  useEffect(() => attach(ref.current!), []);

  return (
    <button className="btn-sig-cap" type="button" ref={ref} {...props}>
      <span className="btn-sig-cap__cap">
        <span className="btn-sig-cap__face">{children}</span>
      </span>
    </button>
  );
}

<button class="btn-sig-cap relative inline-flex items-center justify-center gap-[0.5em] [box-sizing:border-box] w-[104px] h-[104px] [padding:0] [font-family:inherit] text-[15px] font-[800] [line-height:1.2] text-[#fff4dc] [background:none] [border:0px_solid_#8b6cff] rounded-[10px] [box-shadow:none] cursor-pointer no-underline whitespace-nowrap [transition:all_180ms_ease] [filter:drop-shadow(0_4px_4px_rgba(0,0,0,.4))] focus-visible:[outline:2px_solid_#d7263d] focus-visible:[outline-offset:2px] disabled:[opacity:0.5] disabled:[pointer-events:none] hover:[transform:rotate(-10deg)] [&[data-state=stamped]]:[animation:btn-pop_720ms_ease-out] motion-reduce:[animation:none!important] motion-reduce:[transition:none!important]" type="button">
  <span class="grid [place-items:center] w-[100%] h-[100%] [background:conic-gradient(#e6e6ea,_#8a8a93,_#f5f5f7,_#7c7c85,_#e6e6ea,_#8a8a93,_#f5f5f7,_#7c7c85,_#e6e6ea)] [clip-path:polygon(100.0%_50.0%,_93.5%_56.6%,_97.8%_64.7%,_89.6%_69.1%,_91.3%_78.2%,_82.3%_79.9%,_81.2%_89.1%,_72.0%_88.1%,_68.3%_96.5%,_59.8%_92.9%,_53.7%_99.9%,_46.7%_93.9%,_38.9%_98.7%,_33.9%_91.0%,_25.0%_93.3%,_22.6%_84.4%,_13.3%_84.0%,_13.6%_74.8%,_5.0%_71.7%,_8.0%_63.0%,_0.6%_57.5%,_6.0%_50.0%,_0.6%_42.5%,_8.0%_37.0%,_5.0%_28.3%,_13.6%_25.2%,_13.3%_16.0%,_22.6%_15.6%,_25.0%_6.7%,_33.9%_9.0%,_38.9%_1.3%,_46.7%_6.1%,_53.7%_0.1%,_59.8%_7.1%,_68.3%_3.5%,_72.0%_11.9%,_81.2%_10.9%,_82.3%_20.1%,_91.3%_21.8%,_89.6%_30.9%,_97.8%_35.3%,_93.5%_43.4%)]">
    <span class="grid [place-items:center] w-[74%] h-[74%] [background:radial-gradient(circle_at_35%_30%,_color-mix(in_srgb,_#d7263d_76%,_#fff),_#d7263d_62%)] rounded-[50%] [box-shadow:inset_0_0_0_2px_rgba(255,255,255,.35)]">Pop</span>
  </span>
</button>

<!-- A class cannot hold keyframes: keep this in your CSS. -->
<style>
@keyframes btn-pop {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-34px) rotate(200deg); }
  70% { transform: translateY(0) rotate(360deg); }
  85% { transform: translateY(-7px) rotate(370deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
</style>

<!-- Needs the script from the JS tab. -->