Reader Level:
Articles

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.
  • 2
  • 0
  • 11800

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. 

Article Extensions
Contents added by Vithal Wadje on Jan 03, 2013
Note:

This application does not accurate output on IE,You need a Firefox or Chrome
Dhananjay Kumar

Dhananjay kumar is an independent trainer, a consultant and a programmer from India. He has mentored more than 1000 professionals and known for his unique way of teaching. He has been part of the multiple projects for bi... Read more

Personal Blog: http://debugmode.net/
COMMENT USING