Navigation

Get Started

IntroductionInstallation

All Buttons

Double ShiftDelete Button3 D ConfettiAnimationMatrix ButtonNeon ButtonPlasma ButtonQuantum ButtonShadow ButtonShimmer ButtonTron ButtonPluse ButtonCosmic ButtonPluse Glow ButtonSurprising ButtonDonateNow ButtonShare Icon ButtonNoise Button3D ButtonGlass MorphismHexagoan ButtonMorph ButtonElectric ButtonPulse ButtonExpand ButtonSplit ButtonSquish ButtonScan ButtonCircuit BorderLaser BorderRadar ButtonDigital Frame Wave Button Liquid ButtonShockWaveRadial RippleFloating ButtonGradient Flow Solar GradientShift GradientPrism GradidentDancing TextReveal TextScramble TextText AnimationTypewritter EffectText GlitchIcon AnimationIcon MorphHover GlowingBackgroudFill Effect BackgroudSound Effect Pressable buttonMoving BorderHologram ButtonBounce ButtonTextAnimated ButtonCyber Button

Uplift UI Docs

Cosmic Button

A cosmic-inspired button with animated colorful particles and a gradient background, powered by Framer Motion. Perfect for creative and modern UIs.

Demo

Interactive Demo

Hover or tap the button to see the animated cosmic particle effect.

Installation

Install the required dependencies to get started:

bash
Loading...

Usage

Import and use the CosmicButton component in your Next.js application:

tsx
Loading...

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Button content (usually text or icon).
onClick() => voidundefinedClick handler for the button.
classNamestring""Additional CSS classes for the button.
disabledbooleanfalseDisables the button if true.
type"button" | "submit" | "reset""button"Button type attribute.

Features

  • Animated cosmic particle effect with multiple colors
  • Gradient animated background
  • Customizable button label and style
  • Framer Motion-powered transitions
  • TypeScript support
  • Production-ready and accessible

Dependencies

Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)