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

774

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