Button

Button with scale animation on hover and translate-y on active

This tailwind example is contributed by Nabile BABABODI ABOUDOU MOUTAROU, on 03-Jan-2026. Component is made with Tailwind CSS v3. It is responsive.

Button Other

Author Nabile BABABODI ABOUDOU MOUTAROU

Fork Fullscreen

<button id="btn" class="border rounded-md m-3 p-2 bg-blue-500 text-white font-bold active:translate-y-1 hover:scale-[1.1] transition-all" onclick="handleSubscribe()">
   <i id="spin" class="fa-solid fa-spinner fa-spin-pulse" hidden></i>
   <span id="btnText">Subscribe</span>
</button>

// 1. Afficher le spinner et changer le texte
        spin.hidden = false; 
        btnText.innerText = "Loading...";
        btn.disabled = true; // Désactive le bouton pour éviter les doubles clics
        btn.classList.add('opacity-75', 'cursor-not-allowed');

// 2. Simuler un appel serveur (ex: ajout d'un étudiant en base de données)
        setTimeout(() => {
            spin.hidden = true;
            btnText.innerText = "Subscribed !";
            btn.classList.replace('bg-blue-500', 'bg-green-500');
        }, 3000);
    }
</script>

Related Examples

Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

11 months ago

1.5k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

11 months ago

851
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Author:
Abdul Baset Bappy

10 months ago

755
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

9 months ago

805
Lots of button examples
tailwind button examples

Author:
QQ-VVN

8 months ago

569
button animation
button animation big

Author:
QQ-VVN

8 months ago

802
Life Tree
by salvator

Author:
Baraka Salvator

8 months ago

914
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

Author:
KULDEEP

6 months ago

408
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

2 months ago

422
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

1 month ago

45
cards
cards with background animation

Author:
Anonymous

2 years ago

11.7k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

7 months ago

809

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components