Docs
Button Border Trail

Button Border Trail

Displays a beautiful Button Border Trail.

Loading...

Installation

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
       keyframes: {
            trail: {
            "0%": { "--angle": "0deg" },
            "100%": { "--angle": "360deg" },
            },
        },
       animation: {
         trail: "trail var(--duration) linear infinite",
      },
    },
  },
}

Update CSS

Add the css to your globle.css file:

globle.css
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

Copy and paste the cn util code into your project.

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

Copy and paste the Border Trail code into your project.

API Reference

Props

PropTypeDescription
durationstringThe duration of the animation.
trailColorstringBorder Trail color.
trailSizestring"sm" | "md" | "lg"
contentClassNamestringAdditional classes for the Border Trail.
childrenReact.ReactNodeThe content of the Border Trail..
classNamestringAdditional classes for the Border Trail..

Usage

export default function LinkButton(className: string) {
  const { resolvedTheme } = useTheme()
 
  return (
    <AnimatedBorderTrail
      trailColor={resolvedTheme === "dark" ? "#ff0" : "purple"}
      className={cn(
        "border border-border bg-base-100 dark:bg-base-500",
        className
      )}
    >
      <button
        className={cn(
          "group relative bg-white dark:bg-black p-2 text-xl font-semibold",
          className
        )}
      >
        <a href={"#"}>
          <span className="px-8 font-semibold">Button with Trail</span>
        </a>
      </button>
    </AnimatedBorderTrail>
  )
}
WorkflowButton with Link