Pues paso rapido a dejarles estos botones que diseñe hace un rato, estan disponibles en 5 colores, tienen efectos hover y active, los desarrolle usando solo CSS3 y es compatible con todos los navegadores exceptuando versiones viejas, bueno es muy sencillo, solo tienen que hacer esto:
Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:
<style type="text/css">...aqui el codigo...</style>
Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin>ensima de eso ponen esto:
/*botones GZero*/
.nw-btn {
border-image: none;
border-radius: 4px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
display: inline-block;
font-size: 13px;
font-family: Arial;
line-height: 20px;
margin: 0;
padding: 4px 12px;
text-align: center;
vertical-align: middle;
cursor:pointer;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-style: solid;
border-width: 1px;
color: #FFF !important;
text-decoration: none !important;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
.nw-btn:hover {
text-decoration: none !important;
}
.nw-btn:active {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*Blanco*/
.nw-btn.white {
background: #F5F5F5;
background-image: linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
background-image: -o-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
background-image: -webkit-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
background-image: -ms-linear-gradient(bottom, #E6E6E6 0%, #FFFFFF 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #E6E6E6),color-stop(1, #FFFFFF));
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #B3B3B3 !important;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75) !important;
color: #333 !important;
}
.nw-btn.white:hover {background:#E6E6E6;}
/*Azul*/
.nw-btn.blue {
background: #49AFCD;
background-image: linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -o-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -moz-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -webkit-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -ms-linear-gradient(bottom, #2F95B4 0%, #5BC0DE 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #2F95B4),color-stop(1, #5BC0DE));
}
.nw-btn.blue:hover {background:#2F96B4;}
/*Verde*/
.nw-btn.green {
background: #5BB75B;
background-image: linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -o-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -moz-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -webkit-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -ms-linear-gradient(bottom, #51A351 0%, #62C462 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #51A351),color-stop(1, #62C462));
}
.nw-btn.green:hover {background:#51A351;}
/*Naranja*/
.nw-btn.orange {
background: #FAA732;
background-image: linear-gradient(bottom, #F89306 0%, #FBB450 100%);
background-image: -o-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
background-image: -moz-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
background-image: -webkit-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
background-image: -ms-linear-gradient(bottom, #F89306 0%, #FBB450 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F89306),color-stop(1, #FBB450));
}
.nw-btn.orange:hover {background:#F89406;}
/*Rojo*/
.nw-btn.red {
background: #DA4F49;
background-image: linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
background-image: -o-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
background-image: -moz-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
background-image: -webkit-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
background-image: -ms-linear-gradient(bottom, #BD362F 0%, #EE5F5B 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #BD362F),color-stop(1, #EE5F5B));
}
.nw-btn.red:hover {background:#BD362F;}
/*Fin botones GZero*/
y listo, ya tienen los botones en su web, ahora para hacer uso de ellos simplemente a una etiqueta "a" le agregan el atributo "class" de la siguiente manera:
<a class="nw-btn white" href="#">Boton Blanco</a>
"white" lo cambian por el color que quieran entre uno de estos:
white
blue
green
orange
red
blue
green
orange
red
por ultimo les dejo una vista previa de los botones:
Boton Blanco
Boton Azul
Boton Verde
Boton Naranja
Boton Rojo
Boton Azul
Boton Verde
Boton Naranja
Boton Rojo
espero que les haya gustado este pequeño y rapido aporte, saludos