Home
Akram Khan
Buttons set

Buttons set

buttons sets of, primary, outlined, text and link

This tailwind example is contributed by Akram Khan, on 28-Sep-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Button Button Group

Author Akram Khan

Fork Fullscreen

<div class="flex flex-col space-y-4 p-4 dark:bg-gray-800">
        
        <button class="bg-blue-600 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-500 dark:hover:bg-blue-600">
            Primary Button
        </button>

<button class="border border-blue-600 text-blue-600 font-bold py-2 px-4 rounded hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white">
            Outlined Button
        </button>

<button class="text-blue-600 font-bold py-2 px-4 rounded hover:bg-blue-600 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:text-blue-500 dark:hover:bg-blue-500 dark:hover:text-white">
            Text Button
        </button>

<button href="#" class="text-blue-600 font-bold hover:underline dark:text-blue-500 dark:hover:text-blue-400">
            Link Button
        </button>
    </div>

Related Examples