Cosmic Button

An animated button/link with a cosmic gradient border effect that spins around the perimeter.

"use client"

import { CosmicButton } from "@/components/vritti/cosmic-button"

export function CosmicButtonExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8">
      <CosmicButton>Get Started</CosmicButton>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/cosmic-button"

Examples

As Link

Visit Website

"use client"

import { CosmicButton } from "@/components/vritti/cosmic-button"

export function CosmicButtonAsLinkExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8">
      <CosmicButton as="a" href="#">
        Visit Website
      </CosmicButton>
    </div>
  )
}

"use client"

import { CosmicButton } from "@/components/vritti/cosmic-button"

export function CosmicButtonAsLinkExample() {
  return (
    <div className="flex flex-col items-center justify-center gap-4 p-8">
      <CosmicButton as="a" href="#">
        Visit Website
      </CosmicButton>
    </div>
  )
}