Cómo crear un botón de descarga en HTML con efecto hoover.

Botónes Descargar y Demo en HTML con efectos de desplazamiento (hoover). Los botones son muy útiles cuando se necesita dar un enlace para descargar o archivo que se carga en cualquier otra ubicación.
Por defecto, blogger no tiene botones (botón de descarga, botón de demostración, etc.). Pero no te preocupes, en este tutorial te mostraré cómo agregar el botón de descarga en las publicaciones de blogger.
Algunas plantillas de blogger gratuitas tienen el código del botón en sí. Si estamos usando tales plantillas, podemos usar los botones fácilmente. Pero algunas otras plantillas de blogger gratuitas no admiten botones. Por lo tanto, necesitamos editar esos temas para que admitan el código del botón.
Entonces, si su plantilla de blogger gratuita no tiene un código de botón, lo ayudaré, solo siga estos pasos.

Por qué necesitamos un botón de descarga (DOWNLOAD)

La mayoría de los bloggers usan enlaces e imágenes para botón Descargar en lugar del botón en HTML, y el uso de imágenes afectará la velocidad de carga de su sitio. Esto tendrá un impacto negativo en su SEO, ya que Google le da mucha importancia a la velocidad de los sitios web en caso de SEO. Debes darle importancia a la velocidad de carga de tu blog. Porque, si alguien ingresa a su sitio desde los resultados de búsqueda de Google y el sitio se está cargando muy lentamente, ¿qué hará? ¿Esperará a que cargue o ira a otro resultado? en su mayoría, los usuarios se sentirán decepcionados y saltarán a otro resultado. Esto causará una mayor tasa de rebote para su sitio.

Por lo tanto, recomiendo usar este simple botón de DESCARGA (DOWNLOAD) hecho en HTML en lugar de las imágenes.

Imagenes PNG usadas para Boton DESCARGA (DOWNLOAD)

Un botón de DESCARGA simplemente puede hacer que su sitio web se vea más profesional que simplemente ofrecer su descarga a través de enlaces. Un botón proporciona una interfaz más limpia, y si desea diseñar uno propio, sus botones pueden ser partes integrales del diseño de su página. Siga esta guía para crear el botón Descargar en HTML o cree un botón con su propio diseño.

Cómo agregar el botón de DESCARGA o DEMO en HTML a las publicaciones de blogger
VER EL DEMO AQUI

Sabemos que al agregar algunos códigos HTML y CSS podemos agregar nuevos widgets a nuestras plantillas de blogger gratuitas.

Aquí también se usa el mismo método. Vamos a agregar algunos códigos CSS a la plantilla gratuita blogger.

Primero necesitamos pegar este código CSS en nuestra plantilla Luego agregue el código HTML en su publicación donde desea el botón de descarga.

Ahora vaya a temas > editar HTML, apreta CRTL y F y en cuadro de busqueda escriba ]]></b:skin>

Pegue el código CSS que figura a continuación Arriba del ]]></b:skin>

Código CSS

a.btn {display:inline-block;position:relative;font-family:inherit;
text-decoration:none;font-weight:700;background:#30abd5;
letter-spacing:.5px;padding:10px 10px;margin:10px;
color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;
text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}
a.btn:hover {background:#EF5223;color:#fff;}
a.btn:active {color:#EF5223;}
a.btn.warn {background:#EF5223;color:#fff}
a.btn.warn:hover {background:#30abd5;color:#fff}
a.btn.warn:active {background:#EF5223;color:#fff}

Ahora queremos el botón de descarga HTML en nuestras publicaciones de blog, lo que debemos hacer para esto es,
simplemente pegar el código del botón HTML que figura a continuación en el lugar donde desea ver los botones en su publicación.

Boton DEMO

<a class="btn warn" 
href="https://trickstofixblog.blogspot.com/" 
rel="nofollow" target="_blank">DEMO</a>

Boton DESCARGA

<a class="btn" 
href="https://trickstofixblog.blogspot.com/" 
rel="nofollow" target="_blank">DESCARGA</a>

Botones DEMO y DESCARGA

<a class="btn warn" 
href="https://trickstofixblog.blogspot.com/" 
rel="nofollow" target="_blank">Demo</a>
<a class="btn" 
href="https://trickstofixblog.blogspot.com/" 
rel="nofollow" target="_blank">Download</a>

NOTA: Cambiar https://trickstofixblog.blogspot.com/ con los links de DEMO y DESCARGA que quieren para hacerlos funccionar. Esto e todo!

RESULTADOS
DEMODESCARGA

Para centrar los botones se debe usar el tag HTML <center>; como en el ejemplo abajo.
Cambiar "Este texto sera orientado al centro." con el codigo HTML de su boton

<center>Este texto sera orientado al centro.</center>