Crear botones con CSS

Escrito por Febrero 11, 2008 – 2:06 pm | por dotBlog | 133 lectura (s)

Muchas veces nos vemos limitados con el diseño de los botones standards del HTML los cuales varian dependiendo del Sistema Operativo que el usuario corra, pero gracias a esta técnica mediante CSS ahora todos los visitantes van a ver el mismo botón el cual es 100% adaptable al formato de tu web.

 

Lo primero que tenemos que hacer es definir un estilo, dentro de los tags <headers> o añadirlo a tu hoja de estilos, dependiendo como hayas creado el sitio.

CSS

span.bouton
{
	background-color: #eee;
	border-left: 1px solid white;
	border-top: 1px solid white;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-family: sans-serif;
	font-size: smaller;
	cursor: pointer; /* me gusta que tenga la manito */
	cursor: hand; /* FUCK IE6 */
	color: #555
}
 
span.bouton:active
{
	border-left: 1px solid #ddd;
	border-top: 1px solid #ddd;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}

HTML

<span class="bouton" onClick="javascript: window.location='http://dotblog.com.ar'">Esto es un boton</span>

Acá podés ver un sencillo ejemplo de lo que se logra con ese código CSS.

Para adaptarlo a tu sitio tenés que cambiar el color del fondo, los bordes y todo lo que te guste :)

Opina que es gratis!

Acerca de

Sitio dedicado a difundir nuevas tecnologías, noticias de Internet, gadgets, software y todo lo que tenga que ver con las nuevas tendencias de la vida digital.

Suscribirme

 Suscribirse mediante Reader O, suscribirse vía e-mail, en donde recibirás diariamente las novedades que se publican:
Ingresa tu e-mail:  

Seguime en Twitter

Ahora podés recibir las noticias y actualizaciones directamente en tu Twitter! Solo tenés que seguir al usuario de dotBLOG y listo!
Google