How to Create Circle Buttons with Tailwind CSS

Updated: March 3, 2023 By: A Goodman Post a comment

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:

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles