Botones Demo y Download con iconos para uso en Blogger.

Antes de hacer todos los cambios mencionados aqui, debes hacer una copia de seguridad de tu plantilla Blogger.

Primero lo que debemos de hacer es incorporar en nuestra plantilla el Fontawesome.
Para eso copiamos la linia de codigo abajo y lo pegamos antes del </head>.

<link href='https://cdn.jsdelivr.net/gh/startinhit/font-awesome/css/all.css' rel='stylesheet'/>

a.buttonhcv {
  background-size: 300% 100% !important;
  background: linear-gradient(-225deg, #7742b2 0%, #f180ff 52%, #fd8bd9 100%);
  position: relative;
  display: inline-block;
  height: 45px;
  line-height: 45px;
  padding: 0 30px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 15px 10px;
  text-transform: uppercase;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.1);
  font-weight: bold;
}
a.buttonhcv:hover {
  opacity: 0.8;
  color: #fff;
  transition: 0.3s;
}
.buttonhcv:before {
  font-family: "Font Awesome 5 Pro", "Font Awesome 5 Brands";
  font-weight: 900;
  display: inline-block;
  margin: 0 5px 0 0;
  margin-left: -30px;
}
.buttonhcv.demohcv:before {
  content: "\f06e";
  display: inline-block;
  margin-right: 30px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 5px 0 0 5px;
  width: 45px;
}
.buttonhcv.downloadhcv:before {
  content: "\f019"
  display: inline-block;
  margin-right: 30px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 5px 0 0 5px;
  width: 45px;
}
a.buttonhcv.downloadhcv {
  background: linear-gradient(-225deg, #00a26d 0%, #02ffac 52%, #039c79 100%);
}
a.buttonhcv.demohcv {
  background: linear-gradient(
    135deg,
    #ff4c2e 0%,
    #f9a82f 45%,
    #ff4c2e 77%,
    #f7352e 100%
  );
}

<a class="buttonhcv demohcv" href="link button" rel="nofollow" target="_blank">Demo</a>

<a class="buttonhcv downloadhcv" href="link button" rel="nofollow" target="_blank">Download</a>

RESULTADOS

DemoDownload