Tutorial Details
- Difficulty: Beginner
- Technology: HTML4+, CSS3
- Supported Browser: Firefox 3.6+, Chrome 5+, Safari 4+, iPhone Safari
1. HTML
[xhtml]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 – Gradient Rounded Corner Button</title>
</head>
<body>
<a class="button red">Red Button</a>
<a class="button green">Green Button</a>
<a class="button blue">Blue Button</a>
</body>
</html>
[/xhtml]
First of all, we created a HTML structure as shown above. Insert css class called ‘button’ to all the links and the color class as well.
2. CSS
[css]
.button {
border-radius: 50px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-moz-border-radius: 50px;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-webkit-border-radius: 50px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
color: #fff;
cursor: pointer;
float: left;
font-size: 18px;
font-weight: bold;
margin-right: 20px;
padding: 5px 20px;
text-decoration: none;
}
.button:hover {
color: #fff;
text-decoration: none;
}
.red {
background:-moz-linear-gradient(center top , #f40000, #cc0000);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
}
.green {
background:-moz-linear-gradient(center top , #78f000, #66cc00);
background: -webkit-gradient(linear, center top, center bottom, from(#78f000), to(#66cc00));
}
.blue {
background:-moz-linear-gradient(center top , #0079f4, #005cba);
background: -webkit-gradient(linear, center top, center bottom, from(#0079f4), to(#005cba));
}
[/css]
Next, we style our button elements by using CSS3. As you can see, we define 50px of rounded corner in css by using ‘border-radius’ property which is supported in most of the modern browser(except IE8, IE7, IE6).
[css firstline=”2″]
border-radius: 50px;
[/css]
Second, we create drop shadow for our buttons by defining ‘box-shadow’ property with 2px down from the button, 4px blur and 60% of opacity.
[css firstline=”3″]
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
[/css]
Thirdly, we need to create the gradient for each button. In order to achieve that, the ‘-linear-gradient([1st parameter], [starting color], [ending color])’ property has been used to define the gradient. For example: we define the gradient starting position which are ‘center top’ in the first parameter, follow by starting color’#f40000′ to ending color’#cc0000′ in the ‘-moz-linear-gradient’.
[css firstline=”24″]
background:-moz-linear-gradient(center top , #f40000, #cc0000);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
[/css]
Note:
-moz- is for Gecko Engine Browser and -webkit- is for Webkit Engine Browser.
Final Code
[xhtml]
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 – Gradient Rounded Corner Button</title>
<style>
.button {
border-radius: 50px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-moz-border-radius: 50px;
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
-webkit-border-radius: 50px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
color: #fff;
cursor: pointer;
float: left;
font-size: 18px;
font-weight: bold;
margin-right: 20px;
padding: 5px 20px;
text-decoration: none;
}
.button:hover {
color: #fff;
text-decoration: none;
}
.red {
background:-moz-linear-gradient(center top , #f40000, #cc0000);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));
}
.green {
background:-moz-linear-gradient(center top , #78f000, #66cc00);
background: -webkit-gradient(linear, center top, center bottom, from(#78f000), to(#66cc00));
}
.blue {
background:-moz-linear-gradient(center top , #0079f4, #005cba);
background: -webkit-gradient(linear, center top, center bottom, from(#0079f4), to(#005cba));
}
</style>
</head>
<body>
<a class="button red">Red Button</a>
<a class="button green">Green Button</a>
<a class="button blue">Blue Button</a>
</body>
</html>
[/xhtml]
That’s it! Now you can create a gradient rounded corner button purely with css!