My First Component - Buttons

buttons and flexbox

This tailwind example is contributed by Felipe Pinheiro, on 26-Jun-2024. Component is made with Tailwind v3.4. It is responsive.

Button

Author Felipe Pinheiro

Tailwind v3.4 73

Fork Fullscreen

<buttom type="buttom"
            class="w-20 text-center bg-green-500 text-white px-3 py-1 border hover:ring-1 ring-yellow-600 rounded-lg font-semibold transition cursor-pointer uppercase"
            onclick="alert(this.innerText);">
            active
        </buttom>

<buttom type="buttom"
            class="w-20 text-center bg-red-500 text-white px-1 text-sm py-1 border hover:ring-1 ring-yellow-600 rounded-lg font-semibold transition cursor-pointer uppercase text-truncate"
            onclick="alert(this.innerText.toLowerCase());">
            deactive
        </buttom>
    </div>
</div>

Related Examples

Neomorphism button

Akram Khan

2 years ago

3.3k
Floating pus button

Jaffar Hussain

2 years ago

2.3k
button-neon-purple-super

Mohammad Rashel

10 months ago

1.1k
Ultimate Tailwind CSS Buttons
A collection of modern Tailwind CSS buttons featuring gradients, shimmer effects, glassmorphism, cyberpunk styles, 3D interactions, and more.

JUGENDRA GANGWAR

1 week ago

22
Color Changing Gradient Button
Color Changing Gradient Button

EquinoX

2 years ago

4.4k
Glowing gradient button
Button on black background

Leon Bachmann

3 years ago

41.1k
Gold Premium Button
🪙 Glowing Premium BIP Gold Button in pue Tailwind CSS

Arnav K

2 years ago

6.2k
Button
Material Button

Akram Khan

2 years ago

2.1k
gradient button

Akram Khan

2 years ago

2.8k
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

UI-Templates

1 year ago

1.1k
Lots of button examples
tailwind button examples

QQ-VVN

1 year ago

1.3k
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Sedat Kumcu

1 year ago

2.5k