In this post we will learn creating a round button in HTML 5 and CSS 3.0. Let us say we have a HTML button as 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 above HTML in browser, button would be rendered as following,
We can make this button a round button using CSS 3.0. By setting value of border-radius to 100% , you can make a button round.
button {
height: 200px;
width: 200px;
border-radius : 100%;
background-color: #C91826;
}
At this point if you render above HTML in browser, button would be rendered as following,
You notice here is that text on button is not that immersive. We can make that more immersive by setting other CSS attributes as 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 above HTML in browser, button would be rendered as following,
In this way you can create a round button in HTML5 and using CSS 3.0. I hope you find this post useful. Thanks for reading.
