CSS Circle Button Examples

Last updated on December 2, 2020 A Goodman Loading... Post a comment

This article walks you through a few examples of creating a circle button in CSS. Our strategy is to make a square button then set the border-radius to be equal to at least a half of the button’s width.

Example 1

Preview:

HTML & CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Circle Button</title>
    <style>
      * {
        /* Reset browser's padding and margin */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        margin: 100px;
      }

      .my-button {
        width: 200px;
        height: 200px;
        outline-style:initial;
        border-radius: 100px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button class="my-button">Button</button>
    </div>
  </body>
</html>

Example 2

Preview:

HTML & CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Circle Button</title>
    <style>
      * {
        /* Reset browser's padding and margin */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        margin: 100px;
      }

      .my-button {
        width: 200px;
        height: 200px;
        border: none;
        border-radius: 100px;
        outline: none;
        background: #b71540;
        color: white; 
        cursor: pointer;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
      }
      .my-button:hover {
        background: #eb2f06;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button class="my-button">Button</button>
    </div>
  </body>
</html>

That’s it!

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x