Gradient Border Button

const css = `
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.gradient-border {
  background: conic-gradient(from var(--angle), #c8a96a, transparent 40%, transparent 60%, #c8a96a);
  animation: gradient-border-spin 3s linear infinite;
}
@keyframes gradient-border-spin {
  to { --angle: 360deg; }
}
`;

export function GradientBorderButton({ children = 'Get started' }: { children?: React.ReactNode }) {
  return (
    <span className="gradient-border inline-block rounded-[10px] p-[1.5px]">
      <style>{css}</style>
      <button
        type="button"
        className="block rounded-[8.5px] bg-[#0e0f11] px-[26px] py-3 text-[15px] font-medium text-[#ece9e2]"
      >
        {children}
      </button>
    </span>
  );
}