Skip to main content

Gradient Party Button

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

ButtonReactGSAPTailwind CSS
CSSTailwind

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 components

Button Tilt

Max

Animated Border Button

GitHub Stars Button

Raised Button

Resource details

PublishedMarch 12, 2026
CategoryButton
ReactGSAPTailwind CSS