bevel-button

1"use client";
2import React, { useEffect } from "react";
3import { cn } from "@/lib/utils";
4 
5interface BevelButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6  speedMs?: number;
7}
8 
9const PROPERTY_CSS = `
10@property --bevel-angle {
11  syntax: '<angle>';
12  initial-value: 180deg;
13  inherits: false;
14}
15@keyframes bevel-button-spin {
16  to { --bevel-angle: 540deg; }
17}
18`;
19 
20let propertyStyleInjected = false;
21const injectPropertyStyles = () => {
22  if (typeof document === "undefined" || propertyStyleInjected) return;
23  propertyStyleInjected = true;
24  const style = document.createElement("style");
25  style.setAttribute("data-bevel-button", "");
26  style.textContent = PROPERTY_CSS;
27  document.head.appendChild(style);
28};
29 
30const BevelButton = React.forwardRef<HTMLButtonElement, BevelButtonProps>(
31  ({ className, children, speedMs = 3000, style, ...props }, ref) => {
32    useEffect(() => {
33      injectPropertyStyles();
34    }, []);
35 
36    return (
37      <button
38        ref={ref}
39        className={cn(
40          "relative inline-flex items-center justify-center rounded-[8px] border border-solid border-transparent px-[10px] py-[10px] text-[12px] font-normal leading-none text-white outline-none transition-transform active:scale-[0.98]",
41          className,
42        )}
43        style={{
44          fontFamily:
45            '"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif',
46          background:
47            "linear-gradient(#2d2d2d, #2d2d2d) padding-box, linear-gradient(var(--bevel-angle, 180deg), rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.08) 38%, rgba(0,0,0,1) 100%) border-box",
48          boxShadow:
49            "inset 0px -2px 2.6px 0px rgba(0,0,0,0.57), inset 0px 1px 1.7px 0px rgba(255,255,255,0.25)",
50          animation: `bevel-button-spin ${speedMs}ms linear infinite`,
51          ...style,
52        }}
53        {...props}
54      >
55        {children ?? "Hello Button :)"}
56      </button>
57    );
58  },
59);
60 
61BevelButton.displayName = "BevelButton";
62 
63export default BevelButton;