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

10.1k

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.5k
Button wih hover gradient
Works well with the dark theme

Author:
Leif99

2 years ago

18.3k
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

13.1k
Gradient border button

Author:
Leon Bachmann

3 years ago

16.4k
Buttons examples

Author:
Manuela Bianka

3 years ago

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

Author:
Hyun-woo Cho

2 years ago

9.8k
Button with shadow

Author:
Laurits

3 years ago

12.7k
Sign in with boogle button

Author:
Conan Hilton

3 years ago

10.6k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

40.5k
File Input
File Input

Author:
Aman kumar

1 year ago

2.6k
Tailwind Different Button Styles
Fully Responsive Buttons

Author:
AKASH GANDHAR

1 year ago

2.3k
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

1 year ago

915

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components