Languages
[Edit]
EN

CSS - rounded buttons

0 points
Created by:
Jan-Alfaro
341

In this article, we would like to show you how to create rounded buttons using CSS.

Quick solution:

button {
  border-radius: 10px; /* example value - 10px */
}

Circle button:

button {
  border-radius: 50%; /* circle only if button height=width, otherwise ellipse */
}

 

Practical example with border-radius property

In this section, we add the border-radius property to round the corners of the button elements.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    button {
      padding: 10px;
      margin: 3px;
    }
    
    .button1 {
      border: 3px solid #b30000;
      border-radius: 5px;
    }
    
    .button2 {
      border: 5px dashed #adadad;
      border-radius: 11%;
    }
    
    .button3 {
      border: 6px dotted #15668e;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <button class="button1">Button1</button>
  <button class="button2">Button2</button>
  <button class="button3">Button3</button>
</body>
</html>

Round button

In this example, we create a round button using border-radius property set to 50%

Note:

Remember to make a square button first (height=width), otherwise you will get an ellipse.

Practical example: 

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    .circle {
      /* make square first */
      height: 75px;
      width: 75px;
      
      /* round the corners */
      border-radius: 50%;
    }
    
    .ellipse {
      /* height != width */
      height: 50px;
      width: 75px;
      
      /* round the corners */
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <button class="circle">Circle</button>
  <button class="ellipse">Ellipse</button>
</body>
</html>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join