StackBits - React UI & Full-Stack Code Library

Moving Border Button

A button with a spinning border that moves around the edge. The border changes color when you hover over it.

Utility function

Create a file lib/utils.ts and paste this code

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Moving Border Button

Create a file moving-border-button.tsx in your components folder and paste this code

import { cn } from '@/lib/utils';
import React, { useState } from 'react';

const MovingBorderButton = ({
  children,
  wrapperClassName,
  className,
  onClick,
  type = 'button'
}: {
  children?: React.ReactNode;
  wrapperClassName?: string;
  className?: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
  type?: 'button' | 'submit' | 'reset';
}) => {
  const [isHovered, setIsHovered] = useState(false);

  return (
    <button
      className={cn(`rounded-full overflow-hidden relative p-[2px]`, wrapperClassName)}
      onClick={onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      type={type}
    >
      <span
        className={cn(
          'absolute transition-all inset-[-200%] animate-[spin_2.5s_linear_infinite] bg-[conic-gradient(from_90deg,transparent_30%,#444444_100%)] blur-md',
          isHovered && 'bg-[conic-gradient(from_90deg,transparent_30%,#FFFFFF_100%)] '
        )}
      />
      <span
        className={cn(
          `bg-black transition-all hover:bg-zinc-950 rounded-full px-4 py-2 flex items-center justify-center relative`,
          className
        )}
      >
        {children}
      </span>
    </button>
  );
};

export default MovingBorderButton;

Usage

<MovingBorderButton>Continue</MovingBorderButton>