Creating a Round Button in CSS 3.0

Dhananjay Kumar
Jan 03, 2013
33.6k
0
2
Article

In this article we will learn about creating a round button in HTML 5 and CSS 3.0. Let us say we have a HTML Button as in the following:

<!DOCTYPE html>
<html>
<head>
   <link href="demo.css" rel="stylesheet" />
   <title>
Round Button Demo
   </title>
</head>
<body>
<button>Push Me</button>
</body>
</html>

At this point if you render that HTML in a browser then the button would be rendered as in the following:

We can make this button a round Button using CSS 3.0. By setting the value of the border-radius to 100%, you can make a Button round; see:

button
{

   height: 200px;
   width: 200px;
   border-radius : 100%;
   background-color: #C91826;
}

At this point if you render the above HTML in a browser then the button would be rendered as in the following:

Notice here that the text on the Button is not that immersive. We can make that more immersive by setting other CSS attributes as in the following:

button {
  height: 200px;
   width: 200px;
   border-radius : 100%;
   background-color: #C91826;
   color: #fff;
   font-weight: bold;
   font-size: 40px;
   text-decoration: none;
   text-align: center;
   text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
margin-left : auto;
margin-top : 30px;
margin-bottom : 40px;
margin-right : auto;
border: 1px solid;
border-color: #B21522;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}