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

10k

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

3 years ago

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

Author:
Leif99

2 years ago

18.2k
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

12.9k
Gradient border button

Author:
Leon Bachmann

3 years ago

16.3k
Buttons examples

Author:
Manuela Bianka

3 years ago

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

Author:
Hyun-woo Cho

2 years ago

9.6k
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Author:
Krishna Gudpalle

3 years ago

19.9k
Componentes para mi empresa
para mi empresa

Author:
BocchiChan

8 months ago

1k
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

11 months ago

1.7k
Simple Btn

Author:
Abid Ullah

1 year ago

2.2k
Animated button
on hover underline will go from left to right

Author:
Anonymous

1 year ago

5.3k
Hamburger menu button with hover effect

Author:
_Amar_

2 years ago

17.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components