README.md

Buttons ✨

Buttons help to lead the user to a specific action on a web page. I've got cool animated buttons for different actions for you. Pick the right one for your project!

• Delete Button
• Download Button
• Floating Action Button
• Search Button
• Send Button
• Subscribe Button
• Ripple Button
• Star Button
• Scroll To Top Button
• Share Button
• Confetti Button
• Button Bounce on Click Effect
• Accessible Floating Action Button

Delete Button ⚡

A Flip Delete Button to show the confirm box before deleting! Uses JS to handle the click events.
📎 View code here.

Download Button ⚡

A Download Button animated to show download progress! Uses JS to handle the click event.
📎 View code here.

Floating Action Button ⚡

A Floating Action Button made with "checkbox" input tag to show options when clicked.
📎 View code here.

Search Button ⚡

A Search Button slide in animation for navigation bars! Uses JS to handle the click event.
📎 View code here.

Send Button ⚡

A Send Button with paper plane flying animation to show "sent" state! Uses JS to handle the click event. Fontawesome is used for the icon.
📎 View code here.

Subscribe Button ⚡

A Subscribe Button animation to take in a user's email and get them subscribed to your work! Uses JS for click events.
📎 View code here.

Ripple Button ⚡

A Ripple Button Click Effect which uses JS to generate ripples and CSS for the animation!
📎 View code here.

Star Button ⚡

A Star Button Animation which uses CSS position properties to layout the elements and a combination of transition and transform properties for animation. JS is used to handle click event to update count and toggle CSS classes!
📎 View code here.

Scroll To Top Button ⚡

A Sroll To Top Button which uses CSS position fixed property to place it on bottom of page. JS is used to calculate scroll amount and set the conic background on button when page is scrolled!

📎 View code here.

Share Button ⚡

A Share Button which uses CSS transform and transition properties to style open/close animation states which are toggled on button click handled via JS!

📎 View code here.

Confetti Button ⚡

A Confetti Button made using canvas-confetti npm package with JS!

📎 View code here.

Button Bounce on Click Effect ⚡

A Button Bounce on Click Effect made using CSS transform properties and :active pseudo class!

📎 View code here.

Accessible Floating Action Button ⚡

An Floating Action Button made with accessibilty in mind. Appropriate aria tags are used to make it easy for screenreader users!

📎 View code here.