tap-pop-button

PreviousNext

A Button component with tap and pop animation effect.

Docs
tailwind-admincomponent

Preview

Loading preview…
app/components/animatedComponents/buttons/tap-pop/TapPopButton.tsx
"use client";

import { Button } from '@/components/ui/button'
import { motion } from 'motion/react'


const TapPopButton = () => {
  return (
    <>
        <Button asChild variant="secondary" className="rounded-lg">
          <motion.button
            whileTap={{ scale: 0.94 }}
            whileHover={{ scale: 1.02 }}
            transition={{ type: "spring", stiffness: 400, damping: 18 }}
          >
            Tap pop
          </motion.button>
        </Button>
    </>
  )
}

export default TapPopButton

Installation

npx shadcn@latest add @tailwind-admin/tap-pop-button

Usage

import { TapPopButton } from "@/components/tap-pop-button"
<TapPopButton />