magic-ui
components
ui

animated-subscribe-button

An animated subscribe button useful for showing a micro animation from intial to final result.

animated
button
flex
positioning
text
transition
View Docs

Source Code

Files
animated-subscribe-button
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}