CSS3 Diseño Multi column
junio 20, 2010
FileZilla Tutorial Paso a Paso
julio 13, 2010

CSS3 Botones

Investigando y probando como hacer unos botones usando solo css3 llegue a lo siguiente:

Aceptar Cancelar

Para lograr estos botones use estas características de CSS3:

  • border-radius nos permite hacer las esquinas redondeadas
  • box-shadow es la propiedad que le da la sombra al botón
  • text-shadow le da la sombra al texto
  • rgba donde la «a» corresponde a «alpha» y nos permite especificar la opacidad de un color

Este es el HTML


<a class="boton">Aceptar</a> <a class="boton">Cancelar</a>

y este es el CSS


.boton, .boton:visited {
	background-color: #009AD8;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;

	font-size: 18px;
	font-weight: bold;
	line-height: 1; 

	border-bottom: 1px solid rgba(0,0,0,0.2);
	position: relative;
	cursor: pointer;

	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.2);

}

.boton:hover { background-color: #294C76;
	color: #fff;
	text-decoration: none;
}
.boton:active { top: 1px; }

Comments are closed.