CSS rounded buttons

CSS rounded buttons

DEMO: "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

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="rbuttons.css" />
</head>
 
<body>
 
	<a class="rbutton red" href="http://www.devbox.info/"><span>Red</span></a>
	<a class="rbutton green" href="http://www.devbox.info/"><span>Green</span></a>
	<a class="rbutton blue" href="http://www.devbox.info/"><span>Blue</span></a>
 
</body>
</html>

Source code for 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;
}