Botones elegantes para Blogger

Hola, me llamo Abraham Santos Fernández. Quiero informarles que soy otro nuevo autor en Ayuda Bloggers. Esta es la primera entrada que hago en este maravilloso blog. n esta oportunidad les traigo unos botones elegantes, los cuales se ven bien a la vista de muchas personas (por lo menos a mi).

El mensaje que dice: "Ir a la página principal", se llama tiptip, y lo pueden encontrar en el enlace siguiente: Usar tiptip en Blogger.

El tutorial:

Antes de ]]></b:skin> pegamos los siguientes estilos:

   .btn {

  display: inline-block;

  border: 1px solid rgba(0,0,0,0.4);

  padding: 2px 3px 2px 3px;

  font-weight: bold;

  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);

  -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: #141414; }

.blue:hover { background-color: #00C0DD; color: #FFFDFC; }

.orange { background-color: #CCC; color: #141414; }

.red:hover { background-color: #FF7979; color: #FFFDFC; }

Lo que está de color naranja y azul se puede cambiar, y lo que dice blue y red también se puede cambiar por el nombre que gusten; Y lo que está en negrita, es decir, #00C0DD y #FF8C3F, lo pueden cambiar por el color que guste en Colores web (Ayuda Bloggers) o en la siguiente página: HTML Color Codes, que también es muy buena, intutiva y muy fácil de usar.

Ahora, para poder implementar esto, lo que hemos dado, hemos de poner lo siguiente:

<div class='btn blue' style='font-size: 11px;'>Aquí el texto</div>

Si se fijaron de lo que está en negrita, lo primero (btn) dice que los estilos o css que les hemos agregado, se les agrega a blue. Esto nos permite cambiarlo por el otro, el cual es red, que sería de la siguiente manera:

<div class='btn red' style='font-size: 11px;'>Aquí el texto</div>

Y se le agregarían los estilos de red, lo cual haría, que al pasar el mause por encima del botón, el color de fondo sea naranja. Ahora, para poder ver este efecto funcionando, visiten esta página. Si se fijan, arriba del título del blog, podrán ver estos botones.

Opcional

Si quieren que el efecto hover sea igual a la del blog ya mencionado, que el cambiar de color sea despacio, como con un efecto de desvanecimiento, entonces agreguen el siguiente código donde dice .btn:

-moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;

 Que quedaría de la siguiente manera:

  .btn {
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.4);
  padding: 2px 3px 2px 3px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  -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);
 -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

Esto ha sido todo por hoy. Si alguna duda o comentario, por favor, déjenlo en los comentarios de esta entrada. ¡Hasta la próxima!.