Home » Tutorials » HTML & CSS » CSS3 – Gradient Rounded Corner Button

CSS3 – Gradient Rounded Corner Button

CSS3 – Gradient Rounded Corner Button

Tutorial Details

  • Difficulty: Beginner
  • Technology: HTML4+, CSS3
  • Supported Browser: Firefox 3.6+, Chrome 5+, Safari 4+, iPhone Safari

Demo

Red ButtonGreen ButtonBlue Button

1. HTML

<!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>

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

.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));
}

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).

border-radius: 50px;

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.

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);

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’.

background:-moz-linear-gradient(center top , #f40000, #cc0000);
background: -webkit-gradient(linear, center top, center bottom, from(#f40000), to(#cc0000));

Note:
-moz- is for Gecko Engine Browser and -webkit- is for Webkit Engine Browser.

Final Code


<!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>

That’s it! Now you can create a gradient rounded corner button purely with css!



  • Joseph

    Thanks for tutorial!

    • admin

      Become onlyWebPro Facebook Fans, to get more updates! 🙂

  • Raj

    hi,

    This is very good.thanks for share this ..

    –Raj–

    • admin

      Hi Raj,

      Thank you, become onlyWebPro Facebook Fans, to get more updates! 🙂

  • munts

    I like it, but I don’t see how I could ever use it if it isn’t supported in IE. Do you have any hacks or tricks to get an alternative view for IE users?

    Thanks,
    Munts

    • admin

      Dear munts,

      Thanks for your comment. IE has no supported CSS rounded corner and gradient at the moment.

      Actually, you can achieve the gradient effect by applying ‘filter’ property (only for IE 5.5 above), but you are NOT encourage to do that, because IE is going to support CSS rounded corner and gradient in its coming version – IE9

      Anyways, you still can apply the filter below in your css class to create gradient in IE:

      .tut-round.red {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled=’true’,
      startColorstr=#f40000, endColorstr=#cc0000)
      }

      Hope it helps! Just Like our Facebook Fan Page to get ore updates!
      http://www.facebook.com/pages/Connect-with-onlyWebPro/149917668368025

  • noname

    Even IE9 does not shot it correctly.

    • Hi noname,

      Thanks for your comment. Yes. IE 9 might not fully support some of the features of CSS3. Hope the team of IE will solve the problem and release a better version of browser in this coming year.

Android, iOS Development Tutorials