Button Hover Animation – Frontend.fyi

Jeroen Reumkens PRO

Button Hover Animation

app.jsxstyles.csstailwind.config.jsindex.jsx

Open in editor

import { motion } from "motion/react";

import { spring } from "motion";

const variants = {

resting: {

y: "0%"

hover: {

y: "-100%"

}

};

const HoverButton = ({ text }) => {

return (

<motion.button

variants={{

resting: {

transition: {

staggerChildren: 0.01,

staggerDirection: -1

scale: 1

hover: {

transition: {

staggerChildren: 0.01,

staggerDirection: 1

scale: 0.98

}

}}

transition={{

type: "spring",

bounce: 0.25

}}

initial="resting"

animate="resting"

whileHover="hover">

{text.split('').map((letter, index) => (

<motion.span

transition={{

type: "spring",

bounce: 0.25

}}

className="letter" variants={variants} key={index}>{letter}</motion.span>

))}

</div>

</motion.button>

)

}

const HoverButtonCSS = ({ text, className }) => {

return (

<button

className={`stagger-button ${className}`}>

{text.split('').map((letter, index) => (

<motion.span style={{"--index": index}} className="letter" variants={variants} key={index}>{letter}</motion.span>

))}

</div>

</button>

)

}

export const App = () => {

return (

<div

className="grid min-h-dvh place-items-center text-white">

</div>

</>

);

}