Para añadir estos botones con CSS en tu blog de blogger hay que:
- Plantilla
- Personalizar
- Diseñador de Plantillas
- Avanzado
- Añadir código CSS personalizado, en el recuadro pegar el siguiente código:
.boton{
display: inline-block;
display: inline;
zoom: 1;
padding: 6px 20px;
margin: 0;
cursor: pointer;
border: 1px solid #bbb;
overflow: visible;
font: bold 13px arial, helvetica, sans-serif;
text-decoration: none;
white-space: nowrap;
color: #555;
background-color: #ddd;
background-image: linear-gradient(top, rgba(255,255,255,1),
rgba(255,255,255,0)),
url(data:image/png;base64,iVBORw0KGg[...]QmCC);
transition: background-color .2s ease-out;
background-clip: padding-box; /* Fix bleeding */
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3),
0 2px 2px -1px rgba(0, 0, 0, .5),
0 1px 0 rgba(255, 255, 255, .3) inset;
text-shadow: 0 1px 0 rgba(255,255,255, .9);
}
.boton:hover{
background-color: #eee;
color: #555;
}
.boton:active{
background: #e9e9e9;
position: relative;
top: 1px;
text-shadow: none;
box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}
.boton.color{
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
background-image: linear-gradient(top, rgba(255,255,255,.3),
rgba(255,255,255,0)),
url(data:image/png;base64,iVBORw0KGg[...]QmCC);
}
.boton.verde{
background-color: #57a957;
border-color: #57a957;
}
.boton.verde:hover{
background-color: #62c462;
}
.boton.verde:active{
background: #57a957;
}
.boton.rojo{
background-color: #c43c35;
border-color: #c43c35;
}
.boton.rojo:hover{
background-color: #ee5f5b;
}
.boton.rojo:active{
background: #c43c35;
}
.boton.azul{
background-color: #269CE9;
border-color: #269CE9;
}
.boton.azul:hover{
background-color: #70B9E8;
}
.boton.azul:active{
background: #269CE9;
}
Código en la entrada Html
<a href="URL" class="boton"> Botón Gris</a>
<a href="URL" class="color rojo boton"> Botón Rojo</a>
<a href="URL" class="color verde boton"> Botón Verde</a>
<a href="URL" class="color azul boton"> Botón Azul</a>
