Back

Gradient Party Button

Animated gradient button with colorful blob animations that reveal on hover, featuring polymorphic rendering as button or anchor.

Category
ButtonReact
CSS
Tailwind

Manual

Create a file and paste the following code into it.

src/index-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { GradientPartyButton } from "@/components/ui/button";

function Demo() {
  return (
    <div className="flex items-center justify-center h-dvh bg-black">
      <GradientPartyButton
        as="a"
        href="#"
        target="_blank"
      >
        Get pro
      </GradientPartyButton>
    </div>
  );
}

export default Demo;

Update the import paths to match your project setup.

Similar screens