Estos botones solo utilizan un archivo de carga que es la librería de Font-Awesome para los iconos a la izquierda, esta demás decir que son solo para iconos de acceso gratuito y si no deseas los iconos simplemente no agregues la librería, los botones funcionaran de todas formas en tu Blogger.
Demostración
See the Pen Botones para blogger by DiegoPresol (@DiegoPresol) on CodePen.
Instalar los botones con Efecto Hover
1. Lo primero es agregar la librería antes de la etiqueta <head> en tu plantilla. Debes ir al menú principal → Tema → Editar HTML y buscar.<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous">
- En Blogger: Agregar en tu plantilla antes de }]]></b:skin>.
- En WordPress: Debes buscar la hoja de estilos (style.css) puede variar dependiendo del tema.
.boton {
color: white;
border: #000;
border-radius: 5px;
display: inline-block;
text-align: center;
text-decoration:none;
padding: 0.5em 1.2em;
background: #318aac;
border: 0px solid;
position: relative;
box-shadow: 0px 3px 0px #000;
}
.boton:before {
content:"";
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: all 1s ease;
}
.boton:hover:before {
width: 100%;
}
.boton i {
margin-right: 10px;
}
.boton.green {
background: #1CC60B;
}
.boton.red {
background: #E30B0B;
}
.boton.blue {
background: #4855DA;
}
.boton.orange {
background: #E29C11;
}
.boton.purple {
background: #B911E2;
}
.boton.gray {
background: #858585;
}
<a href="" class="boton"><i class="fas fa-download"></i> Botón por defecto</a> <a href="" class="boton green"><i class="fas fa-info-circle"></i> Botón verde</a> <a href="" class="boton red"><i class="fas fa-exclamation-triangle"></i> Botón rojo</a> <a href="" class="boton blue"><i class="fab fa-facebook-f"></i> Botón azul</a> <a href="" class="boton purple"><i class="fab fa-angellist"></i> Botón morado</a> <a href="" class="boton gray"><i class="fas fa-arrow-alt-circle-right"></i> Botón gris</a>