Tutoriales Sobre Blogger: Botones con efecto de transición con CSS para Blogger

En este tutorial veremos como crear dos estilos de botones con efectos de transiciones para blogger con solo CSS.

Comencemos con un botón de transición circular

• Paso 1: Solo debes de agregar en una entrada o en un gadget el siguiente codigo HTML.

<style>
.circuloTutoriales-Blogger{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:150px;height:150px;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circuloTutoriales-Blogger h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:100px;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circuloTutoriales-Blogger h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circuloTutoriales-Blogger:before,.circuloTutoriales-Blogger:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circuloTutoriales-Blogger:after{transform:rotate(45deg)}
.circuloTutoriales-Blogger:hover:before,circuloTutoriales-Blogger:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circuloTutoriales-Blogger:hover > h1 a,.circuloTutoriales-Blogger:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circuloTutoriales-Blogger">
  <<h1><a href="http://www.tutoriales-blogger.info">Blogger</a></h1>
</div>

Demostración: 

<

Blogger

Seguimos con un botón de transición rectangular

<style>
.rectanguloTutoriales-Blogger{background:#fff;border-radius:10%;cursor:pointer;position:relative;width:15em;height:5em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.rectanguloTutoriales-Blogger h1{color:rgba(8,172,233,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:3em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.rectanguloTutoriales-Blogger h1 a{color:rgba(8,172,233,0);text-decoration:none}
.rectanguloTutoriales-Blogger:before,.rectanguloTutoriales-Blogger:after{border-radius:10%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.rectanguloTutoriales-Blogger:after{transform:rotate(45deg)}
.rectanguloTutoriales-Blogger:hover:before,.rectanguloTutoriales-Blogger:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.rectanguloTutoriales-Blogger:hover > h1 a,.rectanguloTutoriales-Blogger:hover > h1{color:rgba(8,172,233,1)}/* Widget by www.tutoriales-blogger.info*/
</style>
<div class="rectanguloTutoriales-Blogger">
 <h1><a href="http://www.tutoriales-blogger.info">Blogger</a></h1>
</div>

Demostración:

Blogger

Nota:-  Solo debemos cambiar lo que esta en Rojo por URL de tu botón
Nota:- Cambia lo que esta Oojo por el nombre del boton