Skip to main content

pulsating-button

Code Summary​

Summary

The PulsatingButton component is a styled button with an animated "pulsating" effect and link navigation capabilities. It utilizes the Link component from Next.js for navigation and motion.div from Framer Motion for the animation.

Component Overview​

Imports​

  • Link: A Next.js component for client-side navigation between pages.
  • motion: A Framer Motion component used to animate the button.

Props​

  • href (string): The URL to navigate to when the button is clicked.
  • children (React.ReactNode): The content to be displayed inside the button (e.g., text or icons).

Key Features​

1. Navigation​

Navigation Feature

The button acts as a clickable link:

<Link href={href}>

This uses Next.js's Link component to perform client-side navigation to the href.

2. Animation with Framer Motion​

Animation Details

The button's animation is defined using a motion.div. The animation includes:

  • Hover Effects:

    • whileHover={{ scale: 1.05 }}: Slightly enlarges the button when the user hovers over it.
    • whileTap={{ scale: 0.95 }}: Slightly shrinks the button when the user clicks or taps it.

  • Pulsating Effect:

    animate={{
      scale: [1, 1.03, 1], // Grows slightly larger (1.03) and returns to normal (1)
      transition: {
        duration: 3, // Each pulse lasts 3 seconds
        repeat: Infinity, // Repeats the animation forever
        ease: "easeInOut" // Smooth in-out easing for a natural feel
      }
    }}

This animation gives the button a gentle, eye-catching pulsating effect.

3. Styling​

Styling Choices

The button has predefined styles to ensure visual appeal:

className="bg-blue-500 text-white px-6 py-3 rounded-full font-semibold"
  • Background color: bg-blue-500 (a blue tone).
  • Text color: text-white.
  • Padding: px-6 py-3 (6 units horizontally and 3 units vertically).
  • Border radius: rounded-full (creates a pill-shaped button).
  • Font weight: font-semibold (makes the text bold).

How It Works​

  1. The button accepts an href for navigation and children as its content.
  2. The Link component wraps a motion.div, making it both clickable and animated.
  3. Framer Motion applies a hover/tap effect and a continuous pulsating animation to the button.
  4. The button's styles ensure it appears visually appealing and responsive.
Key Process

The seamless combination of animation and navigation enhances the user experience.

Usage Example​

:::example Example Usage

<PulsatingButton href="/contact">
  Contact Us
</PulsatingButton>
  • This creates a button labeled "Contact Us" that navigates to the /contact page when clicked.
  • The button will pulse continuously and respond visually to hover and tap interactions. :::

Key Benefits​

Why Use PulsatingButton?
  • Dynamic Interaction: Combines navigation and animation seamlessly.
  • Declarative Animations: Uses Framer Motion for smooth, declarative animations.
  • Enhanced UX: Adds visual feedback and draws user attention effectively.