DocsComponentsBlog
Star us
Docs

Slide Arrow Button

An arrow button which slides on hover

requires interactionhover

Installation

Install dependencies

npm install lucide-react

Run the following command

It will create a new file slide-arrow-button.tsx inside the components/animata/button directory.

mkdir -p components/animata/button && touch components/animata/button/slide-arrow-button.tsx

Paste the code

Open the newly created file and paste the following code:

import React from "react";
import { ArrowRight } from "lucide-react";
 
interface SlideArrowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  text?: string;
  primaryColor?: string;
}
 
export default function SlideArrowButton({
  text = "Get Started",
  primaryColor = "#6f3cff",
  className = "",
  ...props
}: SlideArrowButtonProps) {
  return (
    <button
      className={`group relative rounded-full border border-white bg-white p-2 text-xl font-semibold ${className}`}
      {...props}
    >
      <div
        className="absolute left-0 top-0 flex h-full w-11 items-center justify-end rounded-full transition-all duration-200 ease-in-out group-hover:w-full"
        style={{ backgroundColor: primaryColor }}
      >
        <span className="mr-3 text-white transition-all duration-200 ease-in-out">
          <ArrowRight size={20} />
        </span>
      </div>
      <span className="relative left-4 z-10 whitespace-nowrap px-8 font-semibold text-black transition-all duration-200 ease-in-out group-hover:-left-3 group-hover:text-white">
        {text}
      </span>
    </button>
  );
}

Credits

Built by Ayush Gupta

Edit this page on GitHub
Shining ButtonStatus Button