Kuma's designs: Enlace con Efecto Fly

PASO a PASO

Desde la opción Tema de Blogger, clic en el botón Personalizar
Clic en Opciones avanzadas y buscamos Agregar CSS.
Copia y pega el siguiente código. Clic en Aplicar al blog

/* Flying Link
----------------------------------------------- */
.fly {
  text-decoration: none;
  position: relative;
}

.fly img {
  width: 65px;
}

a.fly span1{
  width: 100%;
  line-height: 15px;
  padding: 2px;
  font-size: 12px; /* tamaño de texto */
  color: #ff81b1; /* color de texto */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: none;
  background: #2a1c36; /* color de fondo */
  border-radius: 5px;
  pointer-events: none;
  position: absolute;
  right: 200;
  bottom: 0px;
  opacity: 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

a.fly:hover span1{
  opacity:100%;
  left: -50px;
  bottom: 50px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a.fly span2 {
  width: 100%;
  line-height: 15px;
  padding: 2px;
  font-size: 12px; /* tamaño de texto */
  color: #83e3f4; /* color de texto */
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: none;
  background: #2a1c36; /* color de fondo */
  border-radius: 5px;
  pointer-events: none;
  position: absolute;
  right: 200;
  bottom: 0px;
  opacity: 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

a.fly:hover span2 {
  opacity:100%;
  left: -50px;
  bottom: 50px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

Código de Elemento HTML

Pegar el siguiente código desde una entrada, o en gadget desde Diseño de Blogger, o en la misma Plantilla de Blogger desde Tema.

<a class="fly" href="URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrDbx4x9JHVP6yv5LDmjVRDKm468FXeUu0eB7_4Cw38pFpAswIiJ73uyPj0s5Xhn3q2LEmyOurZZa4QlxB1PgbjNhfeetRDdZSnhviw22u90CFynaiprsFNMBNSz2uUNZL_3OmBpW8Lc/s320/download20200503112538.png" /><span1>Nombre</span1></a>

Cosas por editar: URL (dirección web), img (imagen a mostrar), Nombre (nombre del enlace).
Si deseas agregar otro enlace más, solo agrega cualquiera de las siguientes líneas:

Enlace con Efecto Fly

27.5.20

PASO a PASO

Código de Elemento HTML

No hay comentarios:

Publicar un comentario