Personalizar botones con CSS en Blogger

En el día de hoy, quiero enseñarles una forma fácil de configurar un estilo propio para darle a los botones que dispongan en su web, sólo añadiendo un pequeño código en la plantilla.

Lo primero que hay que hacer, es dirigirse a Plantilla » Editar HTML y antes de ]]></b:skin> pegar el siguiente código:

.boton1 {
    display: inline-block;
    cursor: pointer;
    color: #232323;
    text-decoration: none;
    font-weight: 600;
    padding: 10px 15px;
    border: 1px solid #CCC;
    background: #F1F1F1;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(#F9F9F9,0),color-stop(#E3E3E3,1));
    background: -webkit-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    background: -moz-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    background: -ms-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    background: -o-linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    background: linear-gradient(top, #F9F9F9 0%,#E3E3E3 100%);
    -webkit-box-shadow: 0 1px rgba(255,255,255,.2) inset;
    -moz-box-shadow: 0 1px rgba(255,255,255,.2) inset;
    box-shadow: 0 1px rgba(255,255,255,.2) inset;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
}
.boton1:hover{
    background: #E3E3E3;
    color: #0079d7;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
}
.boton1.activo, .boton1:active {
    -webkit-box-shadow: inset 0.5px 1px 3px rgba(0, 0, 0, .3);
    -moz-box-shadow: inset 0.5px 1px 3px rgba(0, 0, 0, .3);
    box-shadow: inset 0.5px 1px 3px rgba(0, 0, 0, .3);
}
.boton1.activo {
    background: whiteSmoke;
    color: #0079d7;
}
.boton1:focus{
    outline:0px;
}

Pueden crear cuantos botones necesiten y personalizarlos a su gusto, en este caso sólo ha sido uno, y lo he llamado "boton1". Este estilo puede ser aplicado en botones de formulario e incluso con DIV, por ejemplo:

Código:

<div class="boton1">Soy un botón de prueba</div>

Resultado:

Soy un botón de prueba

Espero que les haya gustado el tutorial, cualquier duda o sugerencia no duden en dejar un comentario.

¿Que te gustaría aprender a hacer en Blogger?