Fillable Button

A fill sweeps left-to-right across the button on hover using scaleX: 0→1 with originX: 0.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Fillable ButtonA fill sweeps left-to-right across the button on hover using scaleX: 0→1 with originX: 0.

"use client";
import { useState } from "react";
import { motion } from "framer-motion";

type FillableButtonProps = {
  children: React.ReactNode;
  onClick?: () => void;
};

export function FillableButton({ children, onClick }: FillableButtonProps) {
  const [hovered, setHovered] = useState(false);

  return (
    <button
      className="mp-fillable-btn"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={onClick}
    >
      <motion.span
        className="mp-fillable-btn-fill"
        animate={{ scaleX: hovered ? 1 : 0 }}
        transition={{ duration: 0.28, ease: [0.4, 0, 0.2, 1] }}
        style={{ originX: 0 }}
        aria-hidden
      />
      <span className="mp-fillable-btn-label">{children}</span>
    </button>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Button label or content
onClick	() => void	—	Click handler