Caio Cerano | Designer & Developer

My Animated Button

Learn how I did the animated button used in my portoflio.

Tags

Tailwind CSS

React

TypeScript

Introduction

When I first started planning this portfolio, I looked around at various sites for reference, including Awwwards, Refero, StackSorted, and many others, to see what people were up to, mainly focusing on other designer and developer portfolios. While searching for inspiration, I found two different websites that really caught my attention in terms of their button designs. The first one was the circular button from dennissnellenberg.com, and the other was the square button from juno-hamburg.com/. The button from Dennis's site has an animation on hover that moves from bottom to top, but Juno's site introduces an interesting idea where the button fills from the mouse entering position and also exits from the mouse position. It's a small detail, but I really liked it and thought about including something similar in my portfolio.

At this time, I was already developing a hover effect for my website that would replace the traditional mouse cursor. This effect was a simple, dynamic circle that changes its text and format depending on the underlying element. The circular button from Juno's website seamlessly aligned with my vision, providing a perfect match for the interactive and intuitive interface I aimed to create.

Overview of the Hover Button

This button features a dark background that transitions to white when hovered over, with the fill initiating from the mouse pointer. This interactivity enhances the user interface, making the button not just visually appealing but also engaging. I used React, Framer Motion for animations, and Tailwind CSS for styling, focusing on a seamless user experience and responsive design.

import React, { useState, useLayoutEffect, useRef } from 'react'
import { cva, type VariantProps } from "class-variance-authority"
import { motion } from 'framer-motion'
import { cn } from "@/lib/utils"

const animatedButtonVariants = cva(
    "group button h-auto relative z-30 text-white text-xs md:text-lg border inline-flex items-center justify-center transition ease-in-out duration-300 whitespace-nowrap cursor-none lowercase self-start overflow-hidden mix-blend-mode",
    {
        variants: {
            variant: {
                default: "text-white shadow-white border-white",
                active: 'bg-white text-black border-white',
                dark: 'bg-black text-white border-black',
            },
            size: {
                default: "px-2 md:px-4 py-2",
                sm: "h-9 rounded-md px-3",
                lg: "h-11 rounded-md px-8",
                icon: "h-10 w-10",
                rounded: "h-16 w-16 rounded-full",
            },
        },
        defaultVariants: {
            variant: "default",
            size: "default",
        },
    }
)

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof animatedButtonVariants> {
    asChild?: boolean
}

const AnimatedButton: React.FC<ButtonProps> = ({ className, variant, size, asChild = false, ...props }) => {
    const [hover, setHover] = useState(false);
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [scale, setScale] = useState(20);

    const circleSize = 20;
    const buttonRef = useRef<HTMLButtonElement>(null);

    const handleMouseMove = (e: React.MouseEvent<HTMLButtonElement>) => {
        const rect = e.currentTarget.getBoundingClientRect();

        setPosition({
            x: e.clientX - rect.left,
            y: e.clientY - rect.top,
        });
    };

    useLayoutEffect(() => {
        if (buttonRef.current) {
            const { width, height } = buttonRef.current.getBoundingClientRect();

            setScale(Math.max(width, height) / circleSize * 2.3);
        }
    }, []);

    const circleVariant = {
        rest: { scale: 0 },
        hover: {
            scale: scale,
            transition: { ease: "easeInOut", duration: 0.3 },
        },
    };

    const buttonClassName = cn(animatedButtonVariants({ variant, size }), className);

    return (
        <button
            className={buttonClassName}
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
            onMouseMove={handleMouseMove}
            ref={buttonRef}
            {...props}
        >
            <motion.div
                className="absolute bg-white rounded-full z-20 mix-blend-difference"
                initial="rest"
                animate={hover ? "hover" : "rest"}
                variants={circleVariant}
                style={{
                    left: position.x - circleSize / 2,
                    top: position.y - circleSize / 2,
                    width: circleSize,
                    height: circleSize,
                    backgroundColor: variant === 'active' ? '#0a0a0d' : '#dedde1',
                }}
            />
            {props.children}
        </button>
    );
}



export { AnimatedButton, animatedButtonVariants };

Technical Deep Dive

I adopted Framer Motion to create an intuitive animation effect, where the button's color fill reacts directly beneath the cursor upon hover and gracefully returns to its original state as the cursor exits. This was achieved by employing React's useState to toggle the hover state and manage the button's position. The useLayoutEffect hook played a crucial role in dynamically adjusting the animation's scale to match the button's dimensions, ensuring a consistent fill duration regardless of the button's size. useRef was crucial for direct component interaction, allowing precise manipulation of the button's behavior.

Framer Motion was instrumental in defining 'rest' and 'hover' animation states, controlling the scale and color transitions based on user interaction. This dynamic scaling was crucial for maintaining a consistent animation duration across buttons of varying sizes, ensuring a uniform user experience. The animation's responsiveness to mouse position, achieved through a combination of React's state management and Framer Motion's animation capabilities, highlighted the button's interactive nature.

Styling and Challenges

For styling, the class-variance-authority library enabled dynamic style application, allowing for the creation of various button variants, such as dark or active states. This flexibility was pivotal in achieving the desired aesthetic and functional outcomes.

Addressing challenges, a significant focus was on ensuring the animation's duration remained consistent across different button sizes. This required careful calculation and adjustment of animation parameters. Additionally, the square button's hover effect presented issues in Chromium browsers due to mix-blend-difference complications, necessitating alternative solutions. Adapting the design for compatibility with dark and light modes was another critical aspect, ensuring a seamless user experience across different user preferences.

Conclusion

Creating the hover button was about improving interaction. Tools like React, Framer Motion, Tailwind CSS, and CVA helped achieve that. If you have any questions or comments, feel free to reach me.