Botones que cambian al tener cursor encima

Bien el tutorial de hoy es para crear un boton similar a este PPikppik

 LEER ONLINE    

Lo primero que tenemos que hacer es ir a Blogger, dirigirnos a Plantilla > Edicion HTML > Continuar y localizaremos el codigo / ]]>< b:skin y justo ensima colocaremos el siguiente codigo:

.btn {display: inline-block;
background: transparent url(http://2.bp.blogspot.com/_hljKDuw-
cxQ/S32eVQZttxI/AAAAAAAAPKg/ZEPhOn59Rec/s00/demoBoton2.png) repeat-x 0 0;
border: 1px solid #FFF;
padding: 15px 30px 16px 30px;
font-weight: bold;
-moz-border-radius: 15px;
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
} .blue {
background-color: #CCC;
color: #FFFFFF; }
.blue:hover {
background-color:#00C0DD;
color: #ffffff; }
.red {
background-color:#CCC;
color: #ffffff; }
.red:hover {
background-color: #FF004E;
color: #ffffff; }
}

Los campos modificables para principiantes son:

Border: la linea que bordea la imagen, puede quitarse, cambiarse de color o cambiar el solid(_____)
por dashed (- - -) o dotted (.......)
padding: (top)15px (right)30px (bottom)16px (left)30px que son las distancias del tecto a el borde
font-weight: Bold (negrita)

en el boton .blue
Background-color: es el color de fondo que tentra al estar inactivo, (cuando el mouse no este ensima de el)
Color: es el color de la letra inactiva

en el area .blue:hover
Background-color: color de fondo que tendra al estar activo (cuando el cursor este encima de el)
color: el color de la letra activa

Cuando terminemos de copiar y pegar el codigo guardaremos la plantilla y ahora nos iremos a la opcion Diseño> agregar un gadget y colocamos lo siguiente

< div class="btn red"> < a href="DIRECCION" > Texto

< div class="btn blue"> < a href="DIRECCION" > Texto

El primero para un boton rojo y el segundo para uno azul. tambien se les puede agregar las etiquetas "font-size: 50px;" para jugar con el tamaño de la letra inmediatamente despues de class= "btn blue"