Reader Level:
ARTICLE

Creating a Round Button in CSS 3.0

Posted by Dhananjay Kumar Articles | JavaScript January 03, 2013
In this article we will learn about creating a round button in HTML 5 and CSS 3.0.
  • 2
  • 0
  • 8727

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
COMMENT USING

Trending up