Creating a round button in CSS 3.0

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,

image

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,

image

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,

image

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.

About these ads

One thought on “Creating a round button in CSS 3.0

  1. Pingback: Dew Drop – January 3, 2013 (#1,474) | Alvin Ashcraft's Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s