How to Create Circle Buttons with Tailwind CSS

To create a circle button with TailwindCSS, first, create a button with equal width and height (square), then use the rounded-full utility like this:

<div class="p-10">
        <button class="w-72 h-72 rounded-full 
                       bg-blue-500 hover:bg-red-500 text-white">
            Button
        </button>
</div>

Screenshot:

Further reading:

• TailwindCSS: Center an Element inside a Div
• How to use TailwindCSS in Next.js
• CSS: Flipping Card on Hover
• CSS Grid: repeat() and auto-fill example
• CSS: Make a search field with a magnifying glass icon inside
• Using Styled JSX in Next.js: Tutorial & Examples

You can also check out our CSS category page for the latest tutorials and examples.