Sling Academy
Home/Tailwind CSS/How to Create Pill Buttons with Tailwind CSS

How to Create Pill Buttons with Tailwind CSS

Last updated: December 09, 2023

Pill buttons are buttons that have a rounded shape, like a pill or a capsule. They are often used to create a modern and sleek look for websites or applications.

This concise, straightforward article shows you how to create pill buttons with Tailwind CSS. The most important point here is to use the rounded-full utility class to create rounded corners like pills.

Example screenshot:

The code:

<body class="p-20">
    <div class="space-x-5 space-y-5">
        <button
            class="py-2 px-5 rounded-full text-sm text-white bg-blue-500 hover:bg-blue-700 hover:drop-shadow-md duration-300">
            Save Button
        </button>

        <button
            class="py-2 px-5 rounded-full text-sm text-indigo-500 hover:text-indigo-700 border border-indigo-500 hover:border-indigo-700 duration-300">
            Outlined Button
        </button>

        <button
            class="py-2 px-5 rounded-full text-sm text-white bg-red-500 hover:bg-red-700 hover:drop-shadow-md duration-300">
            Delete Button
        </button>

        <button class="py-2 px-5 rounded-full text-sm bg-gray-200 hover:bg-gray-300 hover:drop-shadow-md duration-300">
            Submit Button
        </button>

        <button disabled class="py-2 px-5 rounded-full cursor-not-allowed text-sm bg-gray-100">
            Disabled Button
        </button>

        <button
            class="py-4 px-8 rounded-full text-base font-semibold text-white bg-green-500 hover:bg-green-600 hover:drop-shadow-md duration-300">
            Big Button
        </button>

        <!-- Button with icon -->
        <button
            class="flex justify-center items-center space-x-3 px-8 py-4 rounded-full text-white text-xl bg-rose-500 hover:bg-rose-600 duration-300">
            <svg class="fill-white" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30"
                viewBox="0 0 30 30">
                <path
                    d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z">
                </path>
            </svg>

            <span>Search</span>
        </button>

        <!-- Link Buttons -->
        <a href="#" class="inline-block py-2 px-5 rounded-full text-sm bg-amber-300 hover:bg-amber-400 duration-300">
            Link Button
        </a>

        <a href="#" class="block py-4 rounded-full text-base font-bold text-center text-white bg-purple-500 hover:bg-purple-700 duration-300">
            Super Wide Link Button
        </a>
    </div>
</body>

That’s it. Happy coding & have a wonderful day!

Next Article: Form Validation with Tailwind CSS (without Javascript)

Previous Article: Tailwind CSS: Create Buttons with Text and Icons Inside

Series: Styling Form Elements with Tailwind CSS

Tailwind CSS

Related Articles

You May Also Like

  • How to Create Striped Tables with Tailwind CSS
  • Tailwind CSS: Creating Shimmer Loading Placeholder (Skeleton)
  • Tailwind CSS: How to Create Parallax Scrolling Effect
  • How to Style Lists in Tailwind CSS
  • Text Underline in Tailwind CSS
  • How to Change Mouse Cursor in Tailwind CSS
  • Form Validation with Tailwind CSS (without Javascript)
  • first-of-type and last-of-type in Tailwind CSS
  • Tailwind CSS: Create a User Card with Circle Avatar
  • Tailwind CSS: How to Create Columns with the Same Height
  • How to Style Placeholder Text with Tailwind CSS
  • Tailwind CSS: Make a Div 100% Height & Width of the Viewport
  • Using :not() selector in Tailwind CSS
  • Tailwind CSS: How to Create a Stepper
  • Using ::before and ::after in Tailwind CSS
  • Tailwind CSS: How to Create a Vertical Divider Line
  • Tailwind CSS: How to Disable Text Selection
  • Tailwind CSS: How to Disable Resizing of Textarea
  • Tailwind CSS: Expand a Text Input on Focus (without Javascript)