export function TapeStripButton() {
  return (
    <div
      className="p-12 grid place-items-center"
      style={{
        background:
          "repeating-linear-gradient(45deg, #f5f1e8 0 12px, #efe9da 12px 24px)",
      }}
    >
      <style>{`
        .tape-btn {
          transform: rotate(-2deg);
          transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
        }
        .tape-btn:hover {
          transform: rotate(0deg) translateY(-2px);
          box-shadow: 0 10px 24px -10px rgba(0,0,0,0.25);
        }
        .tape-btn:active { transform: rotate(0deg) translateY(0) scale(.98); }
      `}</style>
      <button
        type="button"
        className="tape-btn relative px-10 py-3 text-[14px] font-medium text-[#1c1c1c]"
        style={{
          background: "rgba(252, 244, 165, 0.72)",
          backdropFilter: "blur(2px)",
          border: "1px dashed rgba(0,0,0,0.18)",
          fontFamily: "var(--font-instrument-serif), serif",
          fontStyle: "italic",
          fontSize: "18px",
          boxShadow:
            "inset 0 0 0 1px rgba(255,255,255,0.4), 0 4px 10px -4px rgba(0,0,0,0.18)",
        }}
      >
        <span
          aria-hidden
          className="absolute left-0 top-1/2 -translate-y-1/2 h-full w-3"
          style={{
            background:
              "linear-gradient(90deg, rgba(0,0,0,0.18), transparent)",
          }}
        />
        <span
          aria-hidden
          className="absolute right-0 top-1/2 -translate-y-1/2 h-full w-3"
          style={{
            background:
              "linear-gradient(270deg, rgba(0,0,0,0.18), transparent)",
          }}
        />
        Add to scrapbook
      </button>
    </div>
  );
}
Tape Strip Button
