October 8, 2022
How to Create Rounded Button in HTML and CSS
In this tutorial, you will learn how to create rounded button in HTML and CSS. The button element is used to perform some sort of action on a webpage such as a form submission.
It rarely requires one to modify the shape of a button, but sometimes you may need to do so to meet your requirement. To make a rounded button, you can make use of the CSS border-radius
property.
In the following example, we will demonstrate how you can create a rounded button using CSS. Please have a look over the code example and the steps given below.
HTML
- We have 2 elements in the HTML file (
div
andbutton
). The div element is just a wrapper for the button element. - The
innerText
for the button element is“Click Me”
- In the head element, we have added a stylesheet (
style.css
) using the link element.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Circled button</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div> <button>Click Me</button> </div> </body> </html>
CSS
- We are selecting the
div
element and setting thetext-align
property value to center to horizontally center align the div. - We are selecting the button element and setting the height and width property value to 100px, the
border
property value to2px solid red
, and theborder-radius
property value to50%
. As a result, it will create a rounded button.
div { text-align: center; } button { height: 100px; width: 100px; border: 2px solid red; border-radius: 50%; }