logo imageBeta

Command Palette

Search for a command to run...

Docs
Shimmer Button

Shimmer Button

A button component with a subtle animated shimmer effect.

logo
Juicy UI components
See all

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 shimmer-button.tsx file and copy the below code.

shimmer-button.tsx

"use client";
 
import Link, { LinkProps } from "next/link";
import React from "react";
import { cn } from "@/lib/utils";
 
interface ShimmerButtonProps
  extends React.HTMLAttributes<HTMLAnchorElement>,
    LinkProps {
  children: React.ReactNode;
  href: string;
}
 
const ShimmerButton = ({
  children,
  href,
  className,
  ...props
}: ShimmerButtonProps) => {
  return (
    <Link
      href={href}
      {...props}
      className={cn(
        "relative group flex items-center gap-3 justify-center bg-gradient-to-br from-[#282829] to-[#333335] text-white p-2 rounded-full overflow-hidden border border-white/20 hover:shadow-xl duration-300",
        className
      )}
    >
      {/* Shimmer effect layer */}
      <div className="h-40 w-10 bg-gradient-to-r from-white/10 via-white/50 to-white/10 absolute blur-sm -rotate-45 -left-16 group-hover:left-[150%] duration-500 delay-200" />
 
      {children}
    </Link>
  );
};
 
export default ShimmerButton;

Update the import paths to match your project setup.

Usage

import { ShimmerButton } from "@/components/breezeblocks/shimmer-button";
<ShimmerButton href="/some-link" className="text-4xl font-bold text-black">
  <div>Some content</div>
</ShimmerButton>

Props

PropTypeDescriptionDefault
childrenReact.ReactNode Content of the button-
classNamestringAdditional custom classes-
hrefstringDestination URL for the link-
...propsHTMLAnchorElementAny extra props passed to the underlying next/link-