MotionMotionSpringButtonHover

Spring Button Hover

A satisfying button with spring physics using Motion. Features scale and shadow animations with natural bounce.

Preview

Try hovering and clicking!

Code

import { motion } from 'motion/react'

export function SpringButton({ children, onClick }) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{
        type: 'spring',
        stiffness: 400,
        damping: 17,
      }}
      className="rounded-full bg-olive-950 px-6 py-3 text-white"
    >
      {children}
    </motion.button>
  )
}

PreviousText Reveal Animation NextLayout Animation

Want to see more?

Browse the full collection of animation snippets and find your next inspiration.

View all animations Explore hub