Framer Button 1

Docs

Framer Button 1

A sleek, animated button using Framer Motion for smooth hover and tap effects.

Installation

Install the following dependencies:

npm install framer-motion clsx tailwind-merge

Add the `utils.ts` file to the `@/lib` folder

utils.ts

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Create a `framer-button-1.tsx` file and copy the below code.

framer-button-1.tsx

"use client";
 
import { motion } from "framer-motion";
import React from "react";
import { cn } from "@/lib/utils";
 
interface FramerButton1Props
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
}
 
const FramerButton1: React.FC<FramerButton1Props> = ({
  children,
  onClick,
  className,
  ...props
}) => {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{
        boxShadow:
          "rgba(0, 0, 0, 0.08) 0px 0px 1px 1px, rgba(0, 0, 0, 0.16) 0px 2px 4px 0px, rgba(0, 0, 0, .5) 0px 6px 8px 0px, rgba(0, 0, 0, 0) 0px 16px 16px 0px, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset",
      }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 300 }}
      className={cn(
        "w-fit rounded-xl px-6 py-3 text-white font-medium cursor-pointer will-change-auto",
        className
      )}
      style={{
        background:
          "radial-gradient(50% 145.349% at 50% -46.7%, rgb(40 43 42) 0%, rgb(49 49 49) 100%) rgba(0, 0, 0, 0)",
        boxShadow:
          "rgba(0, 0, 0, 0) 0px 0px 1px 1px, rgba(0, 0, 0, 0.16) 0px 2px 4px 0px, rgba(0, 0, 0, 0.16) 0px 4px 8px 0px, rgba(0, 0, 0, 0) 0px 16px 16px 0px, rgba(255, 255, 255, 0.25) 0px 1px 1px 0px inset",
      }}
      {...props}
    >
      {children}
    </motion.button>
  );
};
 
export default FramerButton1;

Update the import paths to match your project setup.

Usage

import FramerButton1 from "@/components/breezeblocks/framer-button-1";

<FramerButton1>Get Started</FramerButton1>

Props

Prop	Type	Description	Default
children	`React.ReactNode`	The content inside the button	(required)
className	`string`	Additional custom classes for styling	-
...props	`HTMLButtonProps`	Any other button props	-

GO PRO

On This Page

Framer Button 1

Installation

Install the following dependencies:

Add the utils.ts file to the @/lib folder

Create a framer-button-1.tsx file and copy the below code.

Update the import paths to match your project setup.

Usage

Props

Add the `utils.ts` file to the `@/lib` folder

Create a `framer-button-1.tsx` file and copy the below code.