How to Make Circle Buttons in CSS[2 Methods]

You can make circle buttons in CSS by first making square buttons. Then, you can turn the square buttons into circles using the border radius.

Create Circle Button Using Button HTML Tag

  1. Create a button using the button HTML tag.
    <button type="button">X</button>

Unstyled HTML button

  1. Add some background color and give the button a nice border.
    button {
      background-color: #5f3dc4;
      color: #eee;
      border:2px solid #5f3dc4;

Simple Button Styling

  1. Make the button square using CSS.
    button {
    width: 40px;
    height: 40px;

Square button HTML CSS

  1. Turn the square into a circle by adding a border radius.
    button {
      border-radius: 50%;

Complete circle button HTML CSS

Use an Icon Instead of Text on Circle Buttons

Instead of using letters you can incorporate svg icons on HTML buttons.


  <img src="">


button img {
height: 24px;
  width: 24px;

Circle buttons with icons

You can also use font awesome icons on your circle buttons. HTML

    <i class="fa-solid fa-bell"></i>

Add a font awesome link in the head section of your web page.

<link rel="stylesheet" href="" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Circle buttons with icons

author's bio photo

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.