Cómo crear un botón de descargas con CSS
Cree este botón de descargas para blogs en blogger, pero puedes usarlo en cualquier sitio web en el que tengas acceso a las hojas de estilo, y lo mejor es que podrás cambiarlo según tus necesidades. A continuación te explicaré los pasos que debes seguir para implementarlo y así personalizar tu blog.


1. Copia los estilos del botón de descarga personalizable

El estilo del botón lo defines con CSS. En este caso es redondeado y se convierte en un cuadrado al acercar el puntero, pero más abajo te explicaré como cambiarlo a tu gusto, ahora copia el siguiente código:

Descargar

/* boton para descargas hecho por retoqueyalgomas.blogspot.com*/
/* boton activo */
div.boton {
    max-width: 150px; /* cambia el ancho del botón */
    margin: 30px auto; 
    padding: 50px 20px; /* el espacio entre el texto y el borde del botón */
    background: #68a56a; /* cambia el color del fondo */
    color: white; /* cambia el color del texto del botón */
    text-align: center;
    text-transform: uppercase; /* cambia a mayúsculas. Bórralo si quieres el texto normal */
    font-size: 0.8em; /* cambia el tamaño de fuente */
    border-radius: 50%; /* cambia radio del borde */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transition: 0.5s; /* cambia el tiempo que demorará el efecto al quitar el puntero */
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}

/* boton con el puntero encima */
div.boton:hover {
    background: #ddbe86; /* cambia el color del fondo */
    border-radius: 10px; /* cambia radio del borde */
    transition: 0.5s; /* cambia el tiempo que demorará el efecto al colocar el puntero encima */
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
}

/* enlace del boton */
div.boton a {
    text-align: center; 
    color: white; /* cambia el color de fuente */
    text-decoration: none;
    }


2. Pega los estilos del botón en tu plantilla.

Ahora lo que debes hacer pegar el código anterior en tu plantilla de esta manera:

Primero ve a Tema (o Plantilla) /Editar HTML
Luego presiona CTRL+F y busca ]]></b:skin>
Después pega el código justo arriba.
Dónde copiar el CSS del botón de descargas en la pantilla blogger

3° Coloca el botón en una entrada

Este es el código base del botón, el esqueleto, y tendrás que usarlo en cada entrada en la que quieres poner el botón. Es muy sencillo, solo tienes que copiar lo siguiente:

<div class="boton"><a href="#">Descargar</a></div>
Luego crea tu entrada como siempre y, en la vista HTML, pega el código donde prefieras. ¡Ahora tienes un botón de descargas genial en tu blog!
Editar HTML y copiar código de un botón en una entrada blogger
Recuerda cambiar el símbolo "#" por la url que quieres enlazar, y "Descargar" por el texto que prefieras.


4. Personalizar el botón

¿No te gusta el botón redondo? No hay problema, personalizarlo es muy sencillo. En el propio código está indicado para que sirve cada declaración del CSS, de modo que solo tendrás que hacer la modificaciones que consideres necesarias.

Por ejemplo, si quieres un botón de descarga rectangular y no redondo solo debes poner 0 en las opciones de border-radius (todos, incluidos los que tienen los prefijos -webkit y -moz) y reducir los números del padding.

Si quieres cambiar el color del fondo o el del texto solo modifica en background-color y color, y así según tus necesidades.

Recuerda que puedes usar este botón en todas las entradas que quieras las veces que quieras, y solo tendrás que realizar el paso 3.