Css rounded buttons

Inicio > 1 > Css rounded buttons

Css rounded buttons

enero 14, 2010 gajupo Deja un comentario Ir a los comentarios

Esta es una técnica simple y efectiva de crear botones redondos con CSS y sin JavaScript.

Codigo HTML:

<html>
<head>
	<title>Ejemplo css rounded buttons</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://gajupo.wordpress.com/"><span>Red</span></a>
	<a class="rbutton green" href="http://gajupo.wordpress.com/"><span>Green</span></a>
	<a class="rbutton blue" href="http://gajupo.wordpress.com/"><span>Blue</span></a>

</body>
</html>

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