Reader Level:
Article

Creating a Round Button in CSS 3.0

By Dhananjay Kumar on Jan 03, 2013
In this article we will learn about creating a round button in HTML 5 and CSS 3.0.

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:

Button-in-HTML.jpg

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:

Button-with-css-in-HTML.jpg

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%;
}

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

Rounded-Button-in-CSS.jpg

In this way you can create a round Button in HTML5 and using CSS 3.0. I hope you find this article useful. Thanks for reading. 

Dhananjay Kumar

Dhananjay kumar is 6 times Microsoft MVP, 7 times C# Corner MVP. He works as consultant for Infragistics in India. He is known for mentoring teams on various technologies.

Personal Blog: http://debugmode.net/

COMMENT USING