Glow Button

Buttons 97

About

A button with an animated conic-gradient glow layer behind it, supporting rotate, pulse, breathe, color-shift, flow and static glow modes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glow Button to your project and fits it to your theme.

Code

How Glow Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { GlowButton, type GlowButtonProps } from "@/components/ui/glow";
import { ArrowRight01Icon as ArrowRight } from "hugeicons-react";

type GlowButtonDemoProps = Pick<
  GlowButtonProps,
  "mode" | "blur" | "duration" | "glowScale"
>;

export const GlowButtonDemo = ({
  mode = "rotate",
  blur = "strong",
  duration = 5,
  glowScale = 1,
}: GlowButtonDemoProps) => {
  return (
    <div className="flex min-h-[240px] flex-wrap items-center justify-center gap-6 p-10">
      <GlowButton
        mode={mode}
        blur={blur}
        duration={duration}
        glowScale={glowScale}
        colors={["#FF5733", "#33FF57", "#3357FF", "#F1C40F"]}
      >
        Get Started
        <ArrowRight />
      </GlowButton>
    </div>
  );
};

export default GlowButtonDemo;