Home
Akram Khan
beautiful buttons set

beautiful buttons set

a beautofull buttons set like primary, outline and text.

This tailwind example is contributed by Akram Khan, on 02-Nov-2024. Component is made with Tailwind CSS v3. It is responsive.

Button Button Group

Author Akram Khan

1.5k

Fork Fullscreen

<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-lg">
        <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">Beautiful Buttons</h1>

<div class="mb-8">
            <h2 class="text-xl font-semibold mb-4">Solid Buttons</h2>
            <div class="flex flex-wrap gap-4">
                <button class="inline-flex items-center justify-center bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-check mr-2"></i> Primary
                </button>
                <button class="inline-flex items-center justify-center bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-plus mr-2"></i> Success
                </button>
                <button class="inline-flex items-center justify-center bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-times mr-2"></i> Danger
                </button>
                <button class="inline-flex items-center justify-center bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-exclamation-triangle mr-2"></i> Warning
                </button>
                <button class="inline-flex items-center justify-center bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-info mr-2"></i> Info
                </button>
            </div>
        </div>

<div class="mb-8">
            <h2 class="text-xl font-semibold mb-4">Outline Buttons</h2>
            <div class="flex flex-wrap gap-4">
                <button class="inline-flex items-center justify-center border border-blue-500 text-blue-500 px-4 py-2 rounded hover:bg-blue-500 hover:text-white transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-check mr-2"></i> Primary
                </button>
                <button class="inline-flex items-center justify-center border border-green-500 text-green-500 px-4 py-2 rounded hover:bg-green-500 hover:text-white transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-plus mr-2"></i> Success
                </button>
                <button class="inline-flex items-center justify-center border border-red-500 text-red-500 px-4 py-2 rounded hover:bg-red-500 hover:text-white transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-times mr-2"></i> Danger
                </button>
                <button class="inline-flex items-center justify-center border border-yellow-500 text-yellow-500 px-4 py-2 rounded hover:bg-yellow-500 hover:text-white transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-exclamation-triangle mr-2"></i> Warning
                </button>
                <button class="inline-flex items-center justify-center border border-gray-500 text-gray-500 px-4 py-2 rounded hover:bg-gray-500 hover:text-white transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-info mr-2"></i> Info
                </button>
            </div>
        </div>

<div class="mb-8">
            <h2 class="text-xl font-semibold mb-4">Text Buttons</h2>
            <div class="flex flex-wrap gap-4">
                <button class="inline-flex items-center justify-center text-blue-500 px-4 py-2 rounded hover:bg-blue-100 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-check mr-2"></i> Primary
                </button>
                <button class="inline-flex items-center justify-center text-green-500 px-4 py-2 rounded hover:bg-green-100 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-plus mr-2"></i> Success
                </button>
                <button class="inline-flex items-center justify-center text-red-500 px-4 py-2 rounded hover:bg-red-100 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-times mr-2"></i> Danger
                </button>
                <button class="inline-flex items-center justify-center text-yellow-500 px-4 py-2 rounded hover:bg-yellow-100 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-exclamation-triangle mr-2"></i> Warning
                </button>
                <button class="inline-flex items-center justify-center text-gray-500 px-4 py-2 rounded hover:bg-gray-100 transition transform hover:translate-y-[-2px] hover:shadow-md">
                    <i class="fas fa-info mr-2"></i> Info
                </button>
            </div>
        </div>

</div>

Related Examples

Call to Action (for app stores)
Download app section with Playstore and Appstore button

Author:
Ron Hicks

3 years ago

11.5k
Plug and Play Button - Animated gradient background
Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Author:
Coastal UI

1 year ago

1.8k
🔥 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

850
Settings Button

Author:
Arya

3 years ago

10.7k
Premium Button Collection with 12 Unique Animations
Collection de 12 boutons premium avec animations uniques : glow, shine, slide, 3D push, neon pulse, glassmorphism, gradient border et plus. Chaque bouton a son propre effet hover. 100% Tailwind CSS, no JavaScript.

Author:
Dolbymat

1 month ago

285
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

1 year ago

1.8k
Image Card
An image. Shows title and description info when hovering. Image zooms and darkens when hovering.

Author:
Nick Girga

8 months ago

812
Join now button
Attractive button for the CTA section

Author:
Matej Kovač

1 year ago

2.5k
Buttons in pair

Author:
Bunny

3 years ago

11.9k
Upload button

Author:
Simon Scheffer

2 years ago

10.3k
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
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
Banshee

10 months ago

856

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components