Botones y links con estilo CSS

A todos los amantes del CSS y del diseño web les va a ecantar este truco ;-)

Se trata de darle estilo CSS a los botones o enlaces, el resultado es impresionante, los botones quedan como si estubieran hechos con Flash.

El truco es facil de implementar, aqui van los pasos:

1. Lo primero que hay que hacer es añadir el siguiente estilo CSS a tu blog o a tu web


/* --------------- BOTONES --------------- */

.button, .button:visited { /* botones genéricos */
background: #222 url(http://sites.google.com/site/zavaletaster/Home/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #FFF;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-top: 0px;
border-left: 0px;
border-right: 0px;
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor:pointer;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}

.button:hover { /* el efecto hover */
background-color: #111
color: #FFF;
}

.button:active{ /* el efecto click */
top: 1px;
}

/* botones pequeños */
.small.button, .small.button:visited {
font-size: 11px ;
}

/* botones medianos */
.button, .button:visited,.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

/* botones grandes */
.large.button, .large.button:visited {
font-size:14px;
padding: 8px 14px 9px;
}

/* botones extra grandes */
.super.button, .super.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}

.pink.button { background-color: #E22092; }
.pink.button:hover{ background-color: #C81E82; }

.green.button, .green.button:visited { background-color: #91BD09; }
.green.button:hover{ background-color: #749A02; }

.red.button, .red.button:visited { background-color: #E62727; }
.red.button:hover{ background-color: #CF2525; }

.orange.button, .orange.button:visited { background-color: #FF5C00; }
.orange.button:hover{ background-color: #D45500; }

.blue.button, .blue.button:visited { background-color: #2981E4; }
.blue.button:hover{ background-color: #2575CF; }

.yellow.button, .yellow.button:visited { background-color: #FFB515; }
.yellow.button:hover{ background-color: #FC9200; }


2. Una ves que ya tengas el estilo CSS en tu blog lo unico que falta es aprender a aplicar el CSS a nuestros botones o links, en si lo unico que debes hacer es añadir la clase CSS a tu boton o link.

la clase que tienes que agregar seria asi:

class="button medium green"

ahi en la clase hay dos propiedades que podemos variar a nuestro gusto, que son el tamaño y el color

PARA CAMBIAR EL TAMAÑO: por ejemplo en la donde dice class="button medium green" medium es el tamaño, tenemos 4 tamaños disponibles: small, medium, large y super

PARA CAMBIAR EL COLOR: donde dice class="button medium green" green es el color, tenemos 6 colores disponibles: green, red, yellow, orange, pink y blue

Si lo aplicas a un boton el codigo queda asi:
<input type="button" value"Boton CSS" class="button medium red">

Si lo aplicas a un ink el codigo seria este:
<a href="trucosgeek.blogspot.com" class="button medium yellow">Boton CSS</a>

Bueno aqui les dejo ejemplos de como se ven los botones

Estos son los tamaños:

class="button small blue"


class="button medium green"


class="button large pink"


class="button super yellow"



Estos son los colores:

class="button medium green"


class="button medium blue"


class="button medium red"


class="button medium yellow"


class="button medium pink"


class="button medium orange"