An animated subscribe button useful for showing a micro animation from intial to final result.
1import { CheckIcon, ChevronRightIcon } from "lucide-react";
2import { AnimatedSubscribeButton } from "@/components/magicui/animated-subscribe-button";
3
4export function AnimatedSubscribeButtonDemo() {
5 return (
6 <AnimatedSubscribeButton className="w-36">
7 <span className="group inline-flex items-center">
8 Follow
9 <ChevronRightIcon className="ml-1 size-4 transition-transform duration-300 group-hover:translate-x-1" />
10 </span>
11 <span className="group inline-flex items-center">
12 <CheckIcon className="mr-2 size-4" />
13 Subscribed
14 </span>
15 </AnimatedSubscribeButton>
16 );
17}