CSS rounded buttons

This technique is simple and effective way to have buttons with nice rounded edges using plain CSS without any Javascript usage.

This method was tested on these common browsers:

  • Internet Explorer
  • Mozilla Firefox
  • Opera
  • Safary
  • Google Chrome

DEMO

images

Download full example with images here.

Source code for index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>My project</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.rbuttons.css" />
</head>
 
<body>
 
	<a class="rbutton red" href="http://www.webtoolkit.info/"><span>Red</span></a>
	<a class="rbutton green" href="http://www.webtoolkit.info/"><span>Green</span></a>
	<a class="rbutton blue" href="http://www.webtoolkit.info/"><span>Blue</span></a>
 
</body>
</html>

Source code for webtoolkit.shadow.css

/* do not change */
.rbutton {
	cursor: pointer;
	display: -moz-inline-box;
	display: inline-block;
	padding-left: 5px;
	padding-bottom: 1px;
	line-height: 19px;
	background-position: lef top;
	background-repeat: no-repeat;
}
 
	.rbutton span {
		padding-left: 10px;
		display: -moz-inline-box;
		display: inline-block;
		padding-right: 15px;
		padding-bottom: 1px;
		line-height: 19px;
		background-position: right top;
		background-repeat: no-repeat;
	}
 
/* skin */
.red {
	background-image: url(buttons/red-left.gif);
}
	.red span {
		background-image: url(buttons/red-right.gif);
	}
 
.green {
	background-image: url(buttons/green-left.gif);
}
	.green span {
		background-image: url(buttons/green-right.gif);
	}
 
.blue {
	background-image: url(buttons/blue-left.gif);
}
	.blue span {
		background-image: url(buttons/blue-right.gif);
	}
 
/* font size and family */
.rbutton {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	color: #000000;
}