Home
R.P Ketan
Buttons variations

Buttons variations

This tailwind example is contributed by R.P Ketan, on 24-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Button

Author R.P Ketan

9.8k

Fork Fullscreen

<div class="flex flex-col gap-4">
    <p class="font-bold">Rounded Buttons:</p>

<div class="flex space-x-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Button 1
        </button>
        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
            Button 2
        </button>
        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
            Button 3
        </button>
    </div>

<p class="font-bold">Outline Buttons</p>
    <div class="flex space-x-4">

<button class="border border-blue-500 text-blue-500 font-bold py-2 px-4 rounded">
            Button
        </button>

<button class="border border-red-500 text-red-500 font-bold py-2 px-4 rounded">
            Button
        </button>

<button class="border border-green-500 text-green-500 font-bold py-2 px-4 rounded">
            Button
        </button>
    </div>

<p class="font-bold">Gradient Buttons:</p>
    <div class="flex space-x-4">

<button class="bg-gradient-to-r from-red-400 to-yellow-500 text-white font-bold py-2 px-4 rounded">
            Button
        </button>

<button class="bg-gradient-to-r from-blue-400 to-indigo-500 text-white font-bold py-2 px-4 rounded">
            Button
        </button>

<button class="bg-gradient-to-r from-green-400 to-blue-500 text-white font-bold py-2 px-4 rounded">
            Button
        </button>
    </div>
</div>

Related Examples

Glowing gradient button
Button on black background

Author:
Leon Bachmann

2 years ago

38.3k
Button wih hover gradient
Works well with the dark theme

Author:
Leif99

2 years ago

17.7k
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

12.7k
Gradient border button

Author:
Leon Bachmann

3 years ago

16.2k
Buttons examples

Author:
Manuela Bianka

2 years ago

12.4k
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

2 years ago

9.4k
Travel Landing Page: Australia

Author:
Maxim

8 months ago

1.8k
Boutons iOS 26
Boutons iOS 26

Author:
Omer fils ELENGA

1 day ago

4
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

2 months ago

132
Lots of button examples
tailwind button examples

Author:
QQ-VVN

6 months ago

453
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 (☀️ → 🌙)

Author:
UI-Templates

1 month ago

212
Contact us form
Contact us form

Author:
Geoffrey Callaghan

2 years ago

6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components