Button

1"use client";
2import Link from "next/link";
3
4// to make it work you have to import this button somewhere in your code where you want it, then you have to make looks like this
5// <GradientButton link="">Button</GradientButton>
6// this is reusable button which u can use anywhere you want in your project
7
8const GradientButton = ({
9  link,
10  children,
11}: {
12  link: string;
13  children?: React.ReactNode;
14}) => {
15  return (
16    <Link
17      href={link}
18      className="p-4 px-8 bg-gradient-to-r from-secondary to-primary text-center rounded-md text-neutral-900 font-bold grid place-items-center text-xl transition-all duration-300
19      hover:translate-x-[-4px] hover:translate-y-[-4px] hover:shadow-[4px_4px_8px_rgba(0,0,0,0.7)] 
20      active:translate-x-[0px] active:translate-y-[0px] active:shadow-none
21      "
22    >
23      {children}
24    </Link>
25  );
26};
27
28export default GradientButton;
29

1import Link from "next/link";
2
3const DashedButton = ({
4  href,
5  children,
6}: {
7  href: string;
8  children: string;
9}) => {
10  return (
11    <Link
12      href={href}
13      className="py-2 px-4 border-2 border-dashed border-neutral-900 text-neutral-900 text-xl font-bold rounded-xl duration-200 hover:rounded-md active:scale-95"
14    >
15      {children}
16    </Link>
17  );
18};
19
20export default DashedButton;
21

1import Link from "next/link";
2
3// to make it work you have to import this button somewhere in your code where you want it, then you have to make looks like this
4// <HoverButton link="">Button</HoverButton>
5// this is reusable button which u can use anywhere you want in your project
6
7
8export const HoverButton = ({ href, children }: { href: string, children: string }) => {
9  return (
10    <Link
11      href={href}
12      className="flex w-fit px-8 items-center gap-4 p-4 font-semibold text-xl text-white duration-300 transition-transform active:scale-90 relative overflow-hidden group z-20"
13    >
14      {children}
15      <div className="absolute w-full h-1/2 top-0 left-0 bg-gradient-to-r from-neutral-800 to-neutral-900 translate-x-[-110%] group-hover:translate-x-[0%] transition-transform duration-700 z-[-1]" />
16      <div className="absolute w-full h-1/2 bottom-0 right-0 bg-gradient-to-r from-neutral-800 to-neutral-900 translate-x-[110%] group-hover:translate-x-[0%] transition-transform duration-700 z-[-1]" />
17      <div className="absolute inset-0 bg-orange-500 z-[-2]" />
18    </Link>
19  );
20};
21