Click

html

<div class="click-demo">
  <button type="button" class="click-demo__btn click-demo__btn--primary" style="--accent:#241430;border-radius:10px;">Add to cart</button>
  <p class="click-demo__caption">{{unless showPressed}}rest state &mdash; try clicking it

tailwind

<div style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <button type="button" class="click-tw click-tw--primary px-5.5 py-3 border-2 font-semibold cursor-pointer motion-safe:transition-transform active:scale-[.96] active:brightness-90" style="border-color:#241430;border-radius:10px">Add to cart</button>
  <p class="mt-2.5 text-xs text-[#241430aa]">{{unless showPressed}}rest state &mdash; try clicking it

react

import { useState } from "react";

export function ClickDemo({
  label = "Add to cart",
  variant = "primary",
  accent = "#241430",
  showPressed = false,
  radius = 10,
}) {
  const [pressed, setPressed] = useState(showPressed);
  const skin = {
    primary: { background: accent, color: "#FAF7F2" },
    secondary: { background: "transparent", color: accent },
    ghost: { background: "transparent", borderColor: "transparent", color: accent },
  }[variant];
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <button type="button" className="click-btn"
        onMouseDown={() => setPressed(true)}
        onMouseUp={() => setPressed(false)}
        style={{ padding: "12px 22px", border: "2px solid " + accent, fontWeight: 600, cursor: "pointer",
          transform: pressed ? "scale(.96)" : "none", filter: pressed ? "brightness(.9)" : "none",
          borderRadius: radius, ...skin }}>{label}</button>
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{pressed ? "shown mid-click: scaled down, darker" : "rest state \u2014 try clicking it"}</p>
      <style>{`
        @media (prefers-reduced-motion: no-preference) {
          .click-btn { transition: transform .08s; }
        }
      `}</style>
    </div>
  );
}