LAST UPDATED: AUGUST 5, 2021
How to style round buttons with CSS?
While designing a website, we need to take care of designing the elements within the webpage. We usually see rounded buttons included in the webpage. The HTML <button> element does not include any rounded button. But we can customize the button using CSS. Let's see how to make the round button on the CSS.
Creating a rounded button
To add rounded corners to the buttons, use the border-radius property. For fully rounded buttons use border-radius:50%. In addition to that, we can use other CSS properties to customize the buttons like width, height, background-color, etc.
Example: Creating rounded buttons with CSS
In this example, we have created three different buttons with rounded corners.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
</head>
<style>
button {
width: 50px;
height: 60px;
background-color: #cccccc;
font-size: 16px;
}
</style>
<body>
<div class="container">
<h2> Rounded corner buttons </h2>
<button style=" border-radius: 16px"> click </button>
<button style=" border-radius: 8px"> click </button>
<button style=" border-radius: 50%"> click </button>
</div>
</body>
</html>
Output
Here is the output of the above code.
Example: Creating a fully rounded button with an icon
We usually see rounded buttons with some icons. We can also do the same by using Font Awesome icon library.
Conclusion
In this tutorial, we have learned to create a button with CSS. We have used a border-radius property to do so. The fully rounded buttons take less space on the webpage. We can use these to make the web page good to see.
