Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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: 


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:


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 
- - 0 Comentarios
Tag

Comentarios (0)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar