Border Magic

Docs

Border Magic

A mesmerizing button with an animated conic-gradient border that rotates infinitely.

Installation

Install the following dependencies:

npm install 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 `border-magic-button.tsx` file and copy the below code.

border-magic-button.tsx

"use client";
 
import { cn } from "@/lib/utils";
import { ButtonHTMLAttributes, ReactNode } from "react";
 
interface BorderMagicButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  className?: string;
  children?: ReactNode;
}
 
export function BorderMagicButton({
  className,
  children = "Border Magic",
  ...props
}: BorderMagicButtonProps) {
  return (
    <button
      className={cn(
        "relative inline-flex h-12 overflow-hidden rounded-md p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50",
        className
      )}
      {...props}
    >
      <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
      <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-md bg-slate-950 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl">
        {children}
      </span>
    </button>
  );
}

Update the import paths to match your project setup.

Usage

import { BorderMagicButton } from "@/components/breezeblocks/border-magic-button";

<BorderMagicButton>Border Magic</BorderMagicButton>

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

Border Magic

Installation

Install the following dependencies:

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

Create a border-magic-button.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 `border-magic-button.tsx` file and copy the below code.