Crear Botones Gradientes en CSS3

4/26/2010 07:53:00 p.m. | Publicadas por nenesio | Editar entrada


Esta es una forma de crear botones en CSS3 sin necesidad de javascript o cualquier imagen, simplemente usando una  clase del CSS, te sera fácil cambiar colores, fuentes, ajustar el gradiente, sombras, radio, borde, etc...

El siguiente código es el estilo general de la clase del botón, usando el valor em en el relleno y la propiedad border-radius para que sea escalable sobre la base de font-size. Para ajustar las esquinas redondeadas y el tamaño de los botones, cambiar el borde de radio, tipo de letra, tamaño y los valores de relleno:


.boton {
	display: inline-block;
	zoom: 1;
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.boton:hover {
	text-decoration: none;
}
.boton:active {
	position: relative;
	top: 1px;
}




ahora añadimos la clase dle tamaño por si lo quermeos usar mas grande o mas pequeño:

<br />.bgrande {<br />	-webkit-border-radius: 2em;<br />	-moz-border-radius: 2em;<br />	border-radius: 2em;<br />}<br />.bmedio {<br />	font-size: 12px;<br />	padding: .4em 1.5em .42em;<br />}<br />.bpeque {<br />	font-size: 11px;<br />	padding: .2em 1em .275em;<br />}<br /><br />



Ahora añadimos la clase del color, esto es un ejemplo con el color negro gradiente:

<br />.bcolor {<br />	color: #d7d7d7;<br />	border: solid 1px #333;<br />	background: #333;<br />	background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));<br />	background: -moz-linear-gradient(top,  #666,  #000);<br />	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');<br />}<br />.bcolor:hover {<br />	background: #000;<br />	background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));<br />	background: -moz-linear-gradient(top,  #444,  #000);<br />	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');<br />}<br />.bcolor:active {<br />	color: #666;<br />	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));<br />	background: -moz-linear-gradient(top,  #000,  #444);<br />	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');<br />}<br /><br />



Detalles que necesitas saber para editar tus propio botones :

zoom = hack IE7
*display = hack IE7
cursor = tipo de cursor
text-align = alineacion del texto texto
font = fuentes (letras)
text-shadow = sombreado de la fuente
-webkit-border-radius = radio del borde (ajusta redondeo de las esquinas)
-moz-border-radius = radio del borde para Firefox (ajusta redondeo de las esquinas)
border-radius = radio del borde (si el navegador no soporta CSS3)
-webkit-box-shadow = sombreado de la caja
-moz-box-shadow = sombreado de la caja para Firefox
box-shadow = sombreado de la caja (si el navegador no soporta CSS3)
background = color de fondo (si el navegador no soporta CSS3)
background: -webkit-gradient = gradiente para webkit
background: -moz-linear-gradient = gradiente para Firefox
filter = hack para IE

Bien ahora crearemos los botones, aqui es lo mas sencillo solo debemos llamar la clase del boton en el link usando class="boton bcolor", ejemplo :

Boton de auto ajuste, usando la clase class="boton bcolor":

<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor">Boton</a>


Boton pequeño, usando class="boton bcolor bpeque":

<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bpeque">Boton</a>


Boton mediano, usando class="boton bcolor bmedio":

<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bmedio">Boton</a>


Boton grande, usando class="boton bcolor bgrande":

<br /><a href="DIRECCION DEL ENLACE" class="boton bcolor bgrande">Boton</a>


Tambien puedes crear botones tipos input, un ejempo:

<br /><input class="boton bcolor" type="button" value="nombre del botón"    />


otras formas de crear botones:

<br /><button class="boton bcolor">Tag Boton</button><br />	<span class="boton bcolor">Span</span> <br />	<div class="boton bcolor">Div</div> <br />	<p class="boton bcolor">P Tag</p> <br />	<h3 class="boton bcolor">H3</h3> <br />


Botones en varios colores?, si, puedes crear varios colores a tu gusto solo debes llamar el color la boton, un ejemplo rápido... arriba veras que el color del ejemplo del CSS se llama con bcolor siendo de color negro, tu puedes crear varios colores cada uno con una clase ejemplo: bazul, brojo, bamarillo, etc... y llamar la clase: class="boton bazul".


Via | Web Designer Wall

Etiquetas:
ShareThis

Recientes Post:

Suscribirse a: Comentarios de la entrada (Atom)

Suscripciones

Blog Archivo

Designed by Blogger Recursos Created by ИЄИЄSIØ.