Cover illustration. The files are listed under What's inside.
Animated Button Design Pack
Twenty-four animated buttons with hover, press, loading and success motion, as Figma interactive components, CSS keyframes and Lottie files.
Fits your $30 budget
Added to your cart.View your cart
- Includes the Standard license: personal, commercial and client work for one person.
- Instant download after payment, plus an email with links that stay active for 30 days.
- Refund within 14 days if you haven't downloaded it yet, if it doesn't work in the supported software listed here, or if it's faulty and we can't fix it.
- Contents
- 24 components
- File formats
- .fig, .aep, .json, .html, .css, .mp4
- Supported software
- Figma, After Effects, Lottie, HTML/CSS
- Download size
- 9 MB
- Good for
- Interactive prototypes
- Web app micro-interactions
- Form submit feedback
About this product
The 24 buttons here combine eight interactions (fill sweep, border draw, press ripple, icon slide, arrow nudge, loading morph, success check and error shake) with filled, outline and ghost styles. In Figma they are interactive components using Smart Animate, on the web the same motion is written as CSS keyframes, and the loading, success and error sequences are also exported as 60 fps Lottie JSON.
Timings are ready to copy into a stylesheet, from 150 ms hovers to a 1.2 s loading loop, and designers can put real press and submit feedback into prototypes for review. After Effects sources and MP4 previews are included for anyone who wants to adjust easing or color.
What's inside
- 24 buttons: 8 interactions × filled, outline and ghost styles
- Figma interactive components with Smart Animate
- CSS keyframes with timings from 150 ms to 1.2 s
- Loading, success and error sequences as 60 fps Lottie JSON
- After Effects sources and MP4 previews included
License
Standard license
Included with every purchase
For one person. Use the assets in unlimited personal and commercial projects, including work you deliver to clients.
Allowed
- Design a client's website with a UI kit and hand over the finished site
- Use the same asset in as many of your projects as you like
- Build your startup's pitch deck from a presentation template
- Use an icon set throughout your company's web app
Not allowed
- Reselling, sharing, sublicensing or giving away the files, as they are or modified, for example on stock sites or marketplaces
- Uploading the files anywhere others can download or extract them, such as a public repository
- Letting several people work from one Standard license (a Team license covers that)
- Selling print-on-demand merchandise or templates built on the assets without an Extended license