Tutorial Blogger: Hacer Botones usando CSS

Buenísimos días de jueves lavanderos!
No me puedo creer que esta semana ya esté llegando a su fin, cada vez se me pasa más rápido el tiempo, y así dentro de nada estamos en noviembre. Un mes en el que estrenaré "nueva" casa (otra vez!!) y además estaré repleta de exámenes y de trabajo. Un caos en definitva :D
Como ya os comenté vamos a seguir aprendiendo a darle formato a nuestras entradas del blog, esta vez os voy a enseñar a hacer botones como este:
VER LA PARTE I DEL TUTORIAL
La ventaja de este tipo de botones, es que además de ser muy visuales y bastante interactivos no usan imágenes y por tanto menos carga le metermos al blog. Además son muy sencillitos de hacer, y sirven tanto para una entrada, como para un gadget HTML.

DEFINIR EL ESTILOLo primero que vamos a hacer, es definir el estilo de nuestro botón, como ya sabéis de sobra, esto se hace mediante CSS. Por tanto vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos lo siguiente:
.boton-descarga a{
font:normal normal 12px Montserrat; /*Tamaño y tipo de letra*/
text-transform: uppercase; /*Para que esté en mayúsuculas, sino borrar esta línea*/
letter-spacing: 3px; /*Espaciado entre letras, si no queréis borrar línea*/
background: #333333; /*Color de fondo del botón*/
border: 1px solid #333333; /*Tamaño, estilo y color del borde*/
color:#ffffff; /*Color de las letras*/
padding: 5px;
text-decoration:none;
}
.boton-descarga a:hover{ /*Al pasar el ratón por encima*/
background: #eeeeee; /*Color del fondo al pasar el ratón por encima*/
border: 1px solid #eeeeee; /*Tamaño, estilo y color del borde al pasar el ratón*/
color:#000; /*Color de las letras al pasr el ratón*/
text-decoration:none;
}
Lo que os he puesto en rojo, ese boton-descarga es el nombre que yo le he dado a mi botón (o lo que en términos de programación se conoce como la clase) así que podéis llamarlo como gustéis. De hecho podéis tener tantos tipos como queráis siempre y cuando a cada uno lo llaméis de una forma diferente.
PONERLO EN NUESTRA ENTRADABien, ahora para ponerlo en la entrada debéis hacer lo siguiente:
1. Poner el nombre, por ejemplo Descarga Aquí
2. Añadir el enlace: ya sabéis seleccionando el texto y pinchando en enlace
3. Pasar a vista HTML y buscar esta parte, os aparecerá así (los atributos rel=... y target=... puede que no os salgan, todo depende de si lo habéis marcado o no):
<a href="URL que hayáis puesto" rel="nofollow" target="_blank">Descarga Aquí</a>
4. Ahora sólo tenemos que meter este código entre medias de este, como veis ahí va el nombre que le hemos puesto al botón, lo que estaba en rojito:
<div class="boton-descarga">Aquí el código</div>
→ Por tanto nuestro código queda tal que así:
<div class="boton-descarga"><a href="URL que hayáis puesto" rel="nofollow" target="_blank">Descarga Aquí</a></div>
Una vez que paséis a la vista normal, no veréis el cambio, pero si le dais a vista previa, ahí ya sí :D (menos el efecto al pasar el ratón por encima, pero sirve para asegurarnos de haberlo hecho bien)

Espero que os haya sido súper útil este post :D Ya sabéis que si lo compartís me hacéis un favor la mar de grande (además ya he añadido el botón de compartir en Google+ que me pedíais ;D)
El domingo nos vemos con un domingo molón muy dulce ;)
Pasad un viernes muy chachi!! Besotes muy fuertes!! Laura.