All Components

Shimmer Button Animation

we're crafting a shimmer effect button that brings extra flair to your UI. With Next.js and Tailwind CSS, we'll make a button that subtly glows and moves like it's straight out of a sci-fi movie.

Watch the tutorial on YouTube

How Does It Work?

  • Gradient Magic: The glow is achieved using Tailwind's bg-gradient-to-r.
  • Hover Interaction: group-hover animates the shimmer when the button is hovered.
  • Extra Style: The rounded corners and shadow effects make it pop!

Now, every time you hover over the button, it'll shimmer like a shooting star.


import Image from "next/image";
import Link from "next/link";
import React from "react";

const ShimmerButton = () => {
return (
  <Link
    href="/"
    target="_blank"
    aria-label="schedule meeting button"
    title="schedule meeting button"
    className="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-zinc-700 hover:ring-1 hover:ring-zinc-600 hover:shadow-xl duration-300"
  >
    <div className="h-[120px] 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" />

    <div className="relative size-10 md:size-12 rounded-full overflow-hidden bg-white/20">
      {/* Image Here */}
      <Image src="Your image src" alt="avatar img" fill />
    </div>
    <div className="text-left">
      <div className="text-sm md:text-base">Schedule a Free Meeting</div>
      <div className="text-xs md:text-sm text-gray-400">With Omar</div>
    </div>

    <svg
      className="w-6 h-6 group-hover:translate-x-2 duration-300"
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        d="M9 5l7 7-7 7"
        stroke="currentColor"
        strokeWidth={2}
        strokeLinecap="round"
      />
    </svg>
  </Link>
);
};

export default ShimmerButton;

And there you have it! A Next.js + Tailwind CSS shimmer button that brings your UI to life. Try adding it to your project and give your users that little "ooh, fancy!" moment.

Happy Coding 👋

Want to Learn How to Build These Components Yourself?

We have step-by-step tutorials for every component to help you create stunning interfaces with ease.

Tutorials on YouTube