Las capacidades de CSS3 (última versión de CSS según la W3C) nos permite ampliar el espectro a la hora de aplicar diseño en un HTML; degradados, animaciones, bordes redondeados, sombras en textos, comportamientos y aún más!.

¿Porqué es conveniente que nuestros botones no sean imágenes?

Porque nos reduce la cantidad de peticiones de ficheros al servidor, nos permite colocar texto vivo y con esto utilizar los mismos botones para varios idiomas, porque podemos aplicarles N diseños a partir de distintas clases CSS, porque no perderán definición en resoluciones HD como tienene hoy día los dispositivos de Apple, entre otras cosas.

¿Qué nos impide prescindir de las imágenes a la hora de hacer botones?

El mayor impedimento que existe es la incapacidad del CSS de poder reflejar 100% cualquier diseño creado en un programa de creación de gráficos como puede ser Photoshop o Fireworks; sombras, reflejos, suavizado de tipografías, etc. Hoy CSS3 nos permite aplicar estos diseños con un alto grado de semejanza.

Por otro lado tenemos el cross-browser, no en todos los navegadores veremos exactamente igual a estos botones, algunos tienen un manejo distinto del suavizado de las fuentes, los últimos IE como son 9 y 10 no muestran bordes redondeados de elementos que tienen degradados de fondo y no aceptan la propiedad font-face para cargar fuentes desde una URL. Las versiones más viejas de IE como son 6 y 7 no aceptan degradados múltiples ni bordes redondeados.

Lo más importante es poner en la balanza la importancia de tener botones vivos y lo exigente que seremos a la hora de reflejar nuestro diseño en HTML.

¿Cómo hago botones vivos con CSS?

Los siguientes son tres diseños de botones CSS que presentan características diferentes. Te presentamos el código HTML y los estilos.

En el HEAD del HTML

Aquí encontrarán los estilos que personalizan los altos y anchos particualres de estos botones; y el llamado a una hoja de estilos externa con todos los estilos genéricos de los botones. Recordemos que utilizarlo de esta manera me permite llamar la hoja de estilos “buttons.css” y luego aplicar distintas medidas a varios botones dentro de nuestro sitio.

Lo otro que encontraremos son condicionales para IE que se encargan de aplicar los degradados para dichos navegadores. De esta manera nos aseguramos que estos estilos sean leídos únicamente si estamos en Internet Explorer.




Dentro del BODY

Acá aparecen las etiquetas HTML a las cuales aplicaremos los diseños desde CSS. En este caso los botones son SPAN que contienen un vínculo dentro. Particularmente el botón naranja grande tiene dos SPAN para poder aplicarle el detalle de reborde gris.

Descargar
Click Aquí
Editar Perfil

En la hoja de estilos “buttons.css”

Estos son todos los estilos necesarios para hacer que los botones adquieran un aspecto real consecuente con el diseño inicial. Hay muchas propiedades repetidas y otras necesarias para la aplicación de detalles puntales. Las fuentes son cargadas externas con la propiedad “font-face“, hay degradados múltiples para la generación del reflejo vidriado, textos con sombra y bordes redondeados.

Las propiedades aplicadas dependerán del grado de detalle y dificultad de tus diseños.

Bienvenido al mundo de los botones vivos :)

@font-face { 
	font-family: "alte"; 
	src: url(alte.ttf); 
}

@font-face { 
	font-family: "calibri"; 
	src: url(calibri.ttf);
}

@font-face { 
	font-family: "helvetica"; 
	src: url(helvetica.ttf);
}

/* Orange button */

.orange_button {
	display: block;
	border: #292929 2px solid;
	border-radius: 7px;
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	border: #444444 2px solid;
	background: #444444;
}
.orange_button span {
	text-align: center;
	display: block;
	padding: 1px;
	background: #de8d2c;
	background: -webkit-gradient(linear, left top, left bottom, from(#fee0b4), to(#b35c02)); 
	background: -webkit-linear-gradient(top, #fee0b4, #b35c02); 
	background: -moz-linear-gradient(top, #fee0b4, #b35c02); 
	background: -ms-linear-gradient(top, #fee0b4, #b35c02); 
	background: -o-linear-gradient(top, #fee0b4, #b35c02);
	border-radius: 7px;
	-moz-border-radius: 7px; 
	-webkit-border-radius: 7px;
	border: #292929 2px solid;
}
.orange_button span a{
	color: white;
	display: block;
	text-shadow: rgba(129, 70, 17, 1) 0 1px 1px;
	font-family: "alte";
	background: #e77000;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffc36e), color-stop(0.50, #eb7e16), color-stop(0.50, #e77000), to(#b85600));
	background: -webkit-linear-gradient(top, #ffc36e, #eb7e16 50%, #e77000, #e77000 50%, #b85600); 
	background: -moz-linear-gradient(top, #ffc36e, #eb7e16 50%, #e77000, #e77000 50%, #b85600); 
	background: -ms-linear-gradient(top, #ffc36e, #eb7e16 50%, #e77000, #e77000 50%, #b85600); 
	background: -o-linear-gradient(top, #ffc36e, #eb7e16 50%, #e77000, #e77000 50%, #b85600);
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	text-decoration: none;
}
.orange_button span a:active{
	text-shadow: rgba(129, 70, 17, 1) 0 -1px 1px;
	/*-moz-transition: all 0.2s ease-in-out 0s;*/
	background: -webkit-gradient(linear, left top, left bottom, from(#ffc36e), color-stop(0.50, #eb7e16), color-stop(0.50, #e77000), to(#b85600));
	background: -webkit-linear-gradient(top, #b85600, #e77000 50%, #e77000, #eb7e16 50%, #ffc36e); 
	background: -moz-linear-gradient(top, #b85600, #e77000 50%, #e77000, #eb7e16 50%, #ffc36e); 
	background: -ms-linear-gradient(top, #b85600, #e77000 50%, #e77000, #eb7e16 50%, #ffc36e); 
	background: -o-linear-gradient(top, #b85600, #e77000 50%, #e77000, #eb7e16 50%, #ffc36e);
}

/* Blue button */

.blue_button {
	text-align: center;
	display: block;
	padding: 1px;
	background: #b7ebfe;
	background: -webkit-gradient(linear, left top, left bottom, from(#b7ebfe), to(#046b95)); 
	background: -webkit-linear-gradient(top, #b7ebfe, #046b95); 
	background: -moz-linear-gradient(top, #b7ebfe, #046b95); 
	background: -ms-linear-gradient(top, #b7ebfe, #046b95); 
	background: -o-linear-gradient(top, #b7ebfe, #046b95 );
	border-radius: 6px;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	border: 0;
}
.blue_button a{
	color: white;
	display: block;
	text-shadow: rgba(0, 100, 137, 1) 0 1px 1px;
	font-family: "calibri";
	background: #6bd7fe;
	background: -webkit-gradient(linear, left top, left bottom, from(#6bd7fe), color-stop(0.50, #13a4d9), color-stop(0.50, #009bd3), to(#0079a6));
	background: -webkit-linear-gradient(top, #6bd7fe, #13a4d9 50%, #13a4d9, #009bd3 50%, #0079a6); 
	background: -moz-linear-gradient(top, #6bd7fe, #13a4d9 50%, #13a4d9, #009bd3 50%, #0079a6); 
	background: -ms-linear-gradient(top, #6bd7fe, #13a4d9 50%, #13a4d9, #009bd3 50%, #0079a6); 
	background: -o-linear-gradient(top, #6bd7fe, #13a4d9 50%, #13a4d9, #009bd3 50%, #0079a6);
	border: 0;
	border-radius: 5px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	text-decoration: none;
}
.blue_button a:active{
	text-shadow: rgba(0, 100, 137, 1) 0 -1px 1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#6bd7fe), color-stop(0.50, #13a4d9), color-stop(0.50, #009bd3), to(#0079a6));
	background: -webkit-linear-gradient(top, #0079a6, #009bd3 50%, #13a4d9, #13a4d9 50%, #6bd7fe); 
	background: -moz-linear-gradient(top, #0079a6, #009bd3 50%, #13a4d9, #13a4d9 50%, #6bd7fe); 
	background: -ms-linear-gradient(top, #0079a6, #009bd3 50%, #13a4d9, #13a4d9 50%, #6bd7fe);
	background: -o-linear-gradient(top, #0079a6, #009bd3 50%, #13a4d9, #13a4d9 50%, #6bd7fe);
}


/* Gray button */

.gray_button {
	text-align: center;
	display: block;
	padding: 1px;
	background: #b7ebfe;
	background: -webkit-gradient(linear, left top, left bottom, from(#afafaf), to(#565656)); 
	background: -webkit-linear-gradient(top, #afafaf, #565656); 
	background: -moz-linear-gradient(top, #afafaf, #565656); 
	background: -ms-linear-gradient(top, #afafaf, #565656); 
	background: -o-linear-gradient(top, #afafaf, #565656 );
	border-radius: 4px;
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px;
	border: 0;
}
.gray_button a{
	color: white;
	display: block;
	text-shadow: rgba(93, 93, 93, 1) 0 1px 1px;
	font-family: "calibri";
	background: #6bd7fe;
	background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), color-stop(0.50, #848484), color-stop(0.50, #737373), to(#5e5e5e));
	background: -webkit-linear-gradient(top, #a1a1a1, #848484 50%, #848484, #737373 50%, #5e5e5e); 
	background: -moz-linear-gradient(top, #a1a1a1, #848484 50%, #848484, #737373 50%, #5e5e5e); 
	background: -ms-linear-gradient(top, #a1a1a1, #848484 50%, #848484, #737373 50%, #5e5e5e); 
	background: -o-linear-gradient(top, #a1a1a1, #848484 50%, #848484, #737373 50%, #5e5e5e);
	border: 0;
	border-radius: 4px;
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px;
	text-decoration: none;
}
.gray_button a:active{
	text-shadow: rgba(93, 93, 93, 1) 0 -1px 1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#a1a1a1), color-stop(0.50, #848484), color-stop(0.50, #737373), to(#5e5e5e));
	background: -webkit-linear-gradient(top, #5e5e5e, #737373 50%, #848484, #848484 50%, #a1a1a1); 
	background: -moz-linear-gradient(top, #5e5e5e, #737373 50%, #848484, #848484 50%, #a1a1a1); 
	background: -ms-linear-gradient(top, #5e5e5e, #737373 50%, #848484, #848484 50%, #a1a1a1); 
	background: -o-linear-gradient(top, #5e5e5e, #737373 50%, #848484, #848484 50%, #a1a1a1);
}

Descargar archivos

Categoría: Web

Publicado por: negro

Entradas más populares

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>