Tutoriales Sobre Blogger: Botones para Blogger con varios opciones de colores

En este tutorial veremos como agregar botones para blogger con varios opciones de colores, ya hemos visto mas estilos de botones en este blog y hoy quiero ofrecerles uno nuevo tutorial sobre botones

Comencemos:

• Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
• Paso 2: Buscamos la siguiente linea (Ctrol + F )

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el código CSS

a.boton {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
position: relative;
margin: 10px;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#1a000000',GradientType=0 ); background-color: #B9B9B9;
}
a.boton:after {
content: '';
position: absolute;
width: 100%; height: 100%;
left: -4px; top: -4px;
padding: 4px;
z-index: -1;
background: #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 0 1px #e1e1e1;
-moz-box-shadow: inset 0 0 0 1px #e1e1e1;
box-shadow: inset 0 0 0 1px #e1e1e1;
}
a.boton:hover {
background-image: none;
}
a.boton:active {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0)));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
background-image: linear-gradient(top bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d000000', endColorstr='#00000000',GradientType=0 );
}
a.boton.naranja {
background-color: #FD5B01;
}
a.boton.rojo {
background-color: #FD0113;
}
a.boton.rosa {
background-color: #FD01B6;
}
a.boton.violeta {
background-color: #8201FD;
}
a.boton.azul {
background-color: #0180FD;
}
a.boton.celeste {
background-color: #01E1FD;
}
a.boton.verde {
background-color: #A2D111;
}
a.boton.amarillo {
background-color: #FDD301;
}
a.boton.negro {
background-color: #000;
}

Ahora agregaremos nuestros botones en una entrada  

Paso 4: Dentro de una entrada pegamos el siguiente código HTML

<a class="boton" href="#">Boton Simple</a>

<a class="boton naranja" href="#">Boton naranja</a>

<a class="boton rojo" href="#">Boton  rojo</a>

<a class="boton rosa" href="#">Boton rosa</a>

<a class="boton violeta" href="#">Boton violeta</a>

<a class="boton azul" href="#">Boton azul</a>

<a class="boton celeste" href="#">Boton celeste</a>

 <a class="boton verde" href="#">Boton verde</a>

 <a class="boton amarillo" href="#">Boton amarillo</a>

 <a class="boton negro" href="#">Button negro</a>

Listo ya estaríamos disfrutando de nuestros botones 100% realizados con CSS.