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.
Subscribe
0 Comments