ARTICLE
Creating a Round Button in CSS 3.0
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:
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%;
}
At this point if you render that HTML in a browser then the button would be rendered as in the following:
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
Note:
This application does not accurate output on IE,You need a Firefox or Chrome