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

Deja un comentario

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>