Magazine

¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

Tutoriaes blogger | 11 efectos "Hover" con animaciones para nuestros enlaces

Publicado el 04 abril 2021 por Kc

Tutoriaes blogger efectos

Tutorial Blogger #18

¡Que tal Lectores!!
Espero tengan un excelente domingo. y como toca tutorial me preguntaba como darle efecto a un enlace determinado, lo que me lleva como siempre a investigar y pasarles el dato a USTEDES. siempre me encanta buscar opciones en los tutoriales desde lo mas sencillo, hasta unos que son un poco mas detallado. Este tutorial constara de dos partes ya que es un poco largo pero que estoy super segura a ustedes les encantara o por lo menos eso es lo que yo espero.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
1.De izquierda a derecha
⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.izdadcha {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-size: 40px;
  line-height: 46px;
  padding: 0 0 6px;
}
a.izdadcha:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: #333;
  transition: left .8s;
}
a.izdadcha:hover:after {
  left: 0;
}

🛠 Para enlazar dicho enlace en nuestra Entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="izdadcha" href="URL">Aquí el texto</a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
2. De derecha a izquierda⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.dchaizda {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-size: 40px;
  line-height: 46px;
  padding: 0 0 6px;
}
a.dchaizda:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 3px;
  background: #333;
  transition: right .8s;
}
a.dchaizda:hover:after {
  right: 0;
}

🛠 Para enlazar dicho enlace en nuestra entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="dchaizda" href="URL">Aquí texto</a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
3.Arriba y abajo opuestos⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.dobleizdadcha {
  position: relative;
  overflow: hidden;
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-size: 40px;
  line-height: 46px;
  padding: 0 0 6px;
}
a.dobleizdadcha:before,
a.dobleizdadcha:after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3px;
  background: #333;
  transition: left .8s;
}
a.dobleizdadcha:hover:before {
  left: 0;
}
a.dobleizdadcha:after {
  top: auto;
  bottom: 0;
  left: auto;
  right: -100%;
  background: #333;
  transition: right .8s;
}
a.dobleizdadcha:hover:after {
  right: 0;
}

🛠 Para enlazar dicho enlace en nuestra entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="dobleizdadcha" href="URL">Aquí Texto</a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
4. Del centro a los lados⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.centro {
  display: inline-block;
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 40px;
  line-height: 46px;
  padding: 0 0 6px;
}
a.centro:after {
  content: "";
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  transition: all .8s;
}
a.centro:hover:after {
  width: 100%;
  background: #333;
}

🛠 Para enlazar dicho enlace en nuestra entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="centro" href="URL">Aquí Texto</a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
5. Doble del centro a los lados⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.doblecentro {
  display: inline-block;
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 40px;
  line-height: 46px;
  padding: 0 0 6px;
}
a.doblecentro:before,
a.doblecentro:after {
  content: "";
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: #333;
  transition: all .8s;
}
a.doblecentro:hover:before,
a.doblecentro:hover:after {
  width: 100%;
}

🛠 Para enlazar dicho enlace en nuestra entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="doblecentro" href="URL">Aquí Texto</a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

6. Borde completo⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.caja {
  display: inline-block;
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 40px;
  line-height: 46px;
  padding: 6px;
}
a.caja:before,
a.caja:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transform: scale(0);
  transition: 0.5s;
}
.caja:before {
  border-bottom: 2px solid #333;
  border-left: 2px solid #333;
  transform-origin: 0 100%;
}
.caja:after {
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform-origin: 100% 0%;
}
.caja:hover:after,
.caja:hover:before {
  transform: scale(1);
}

🛠 Para enlazar dicho enlace en nuestra entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="caja" href="URL">Aquí Texto</a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

7. Borde completo 2⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.caja2 {
  display: inline-block;
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 40px;
  line-height: 46px;
  padding: 6px;
}
a.caja2:before,
a.caja2:after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  box-sizing: border-box;
  transform: scale(0);
}
.caja2:before {
  transform: translateX(100%);
  bottom: 0;
  left: 0;
  height: 2px;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  transition: .1s transform linear, .1s height linear .1s;
}
.caja2:after {
  transform: translateX(-100%);
  top: 0;
  left: 0;
  height: 2px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  transition: .1s transform linear .2s, .1s height linear .3s;
}
.caja2:hover:after,
.caja2:hover:before {
  transform: translateX(0);
  height: 100%;
  border-color: #333;
}

🛠 Para enlazar dicho enlace en nuestra entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="caja2" href="URL">Aquí Texto</a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
8. Animación de fondo⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.centrofondo {
  position: relative;
  text-decoration: none;
  color: #333;
  z-index: 1;
  font-size: 40px;
  line-height: 46px;
  padding: 3px 0;
}
a.centrofondo:before {
  content: "";
  background: #ccc;
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  transform: scaleX(0);
  animation: .8s no-hover;
  animation-fill-mode: forwards;
  z-index: -1;
}
a.centrofondo:hover:before,
a.centrofondo:focus:before {
  animation: .4s hover linear;
  animation-fill-mode: forwards;
}
@keyframes hover {
  0% {
    transform: scaleX(0);
    height: 5px;
  }
  45% {
    transform: scaleX(1.05);
    height: 5px;
  }
  55% {
    height: 5px;
  }
  100% {
    transform: scaleX(1.05);
    height: 2.8rem;
  }
}
@keyframes no-hover {
  0% {
    transform: scaleX(1.05);
    height: 2.8rem;
  }
  45% {
    height: 5px;
  }
  55% {
    transform: scaleX(1.05);
    height: 5px;
    opacity: 1;
  }
  100% {
    transform: scaleX(0);
    height: 5px;
    opacity: .02;
  }
}

🛠 Para enlazar dicho enlace en nuestra entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="centrofondo" href="URL">Aquí Texto</a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
9. Efecto 3D⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.tresd {
  display: inline-block;
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 40px;
  line-height: 46px;
  transition: all .5s ease;
  transform-style: preserve-3d;
}
a.tresd:after {
  content: "Enlace";
  position: absolute;
  top: -100%;
  left: 0px;
  width: 100%;
  background: #ccc;
  transform-origin: left bottom;
  transform: rotateX(90deg);
}
a.tresd:hover {
  transform-origin: center bottom;
  transform: rotateX(-90deg) translateY(100%);
}a[href$=".jpg"]:before,
a[href$=".jpg"]:after,
a[href$=".gif"]:before,
a[href$=".gif"]:after,
a[href$=".png"]:before,
a[href$=".png"]:after {
  background: none;
}

🛠 Para enlazar dicho enlace en nuestra entrada o Post, debes añadir el siguiente código HTML:📌Recuerden que el URL es el enlace o link al cual queremos añadir dicho efecto.

<a class="tresd" href="URL">Aquí Texto</a>

⚙ En este código podríamos también añadirle un fondo si así lo queremos. ya sea que nuestra imagen sea JPG, GIF o PNG. Lo que debemos tener en claro es si la imagen de fondo es antes o después o ambas al mismo tiempo.Solo copien la URL de la imagen que utilizaran como fondo en donde correspondaSi tu imagen es .PNG remplaza el código por el URL de tu imagen (puedes colocarla en BEFORE O AFTER)📌Como este código tiene un background el cual puedes editar al color de fondo que gustes si no quieres añadirle una imagen
📌 También notaras que cuando cambia el 3D el titulo del enlace cambia esto lo puedes editar buscando este código content: "Enlace"; y sustituyéndolo por el que gustes.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
10. Imagen con Borde Completo Tutoriaes blogger efectos

Tutoriaes blogger efectos

⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.caja {
  display: inline-block;
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 40px;
  line-height: 46px;
  padding: 6px;
}
a.caja:before,
a.caja:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transform: scale(0);
  transition: 0.5s;
}
.caja:before {
  border-bottom: 2px solid #333;
  border-left: 2px solid #333;
  transform-origin: 0 100%;
}
.caja:after {
  border-top: 2px solid #333;
  border-right: 2px solid #333;
  transform-origin: 100% 0%;
}
.caja:hover:after,
.caja:hover:before {
  transform: scale(1);
}

📌 Este código es solo para darle un efecto a las imágenes y de echo si escogen el efecto 6 y 7 no añadas todo este código CSS pues es lo mismo solo añade el HTML para el post o entrada con l URL de a imagen.

<a class="caja" href="#"><img src="URL de la Imagen"/></a>

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
11. Imagen con Borde Completo
Tutoriaes blogger efectos

Tutoriaes blogger efectos

⚙ Añadir el siguiente código CSS:Vamos a Temas ▸ Personalizar ▸Avanzado ▸ Añadir CSS

a.caja2 {
  display: inline-block;
  position: relative;
  color: #333;
  text-decoration: none;
  font-size: 40px;
  line-height: 46px;
  padding: 6px;
}
a.caja2:before,
a.caja2:after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  box-sizing: border-box;
  transform: scale(0);
}
.caja2:before {
  transform: translateX(100%);
  bottom: 0;
  left: 0;
  height: 2px;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  transition: .1s transform linear, .1s height linear .1s;
}
.caja2:after {
  transform: translateX(-100%);
  top: 0;
  left: 0;
  height: 2px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
  transition: .1s transform linear .2s, .1s height linear .3s;
}
.caja2:hover:after,
.caja2:hover:before {
  transform: translateX(0);
  height: 100%;
  border-color: #333;
}

📌 Este código es solo para darle un efecto a las imágenes y de echo si escogen el efecto 6 y 7 no añadas todo este código CSS pues es lo mismo solo añade el HTML para el post o entrada con l URL de a imagen.

<a class="caja2" href="#"><img src="URL de la Imagen"/></a>

📎 IMPORTANTEVeran que en todos los códigos estan sobresaltados en color verde. todo lo sobresaltado se tiene que editar para ajustar el tamaño del texto. (dejo como ejemplo el efecto 6)Borde completoYo lo recomiendo el tamaño de texto que hayan indicado ustedes en la personalización.

 font-size: 15px; /* tamaño del texto */

  line-height: 20px;/* tamaño de linea o margen */

◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈

Esto seria todo.Muchas Gracias por leer me, No olviden: comentar, seguir el blog y compartir!!Besitos¡¡Kc...
¿Te gusta lo que hago? Me ayudas

í

Volver a la Portada de

Sobre el autor

Kc ver su perfil
ver su blog

Sus últimos artículos

LAS COMUNIDADES

EL AUTOR DEL DÍA

Esther A.l.
Todo sobre él

TOP MIEMBROS

martaelen
10089039 pt
Mesh
5435221 pt
Cristina Sanjosé
3891948 pt
Comunicae
3702705 pt

JUEGOS EN ES.PAPERBLOG.COM

Puzzle Bobble
Un clásico juego de Arcade. ...... Juega
Karate Blazers
Karate Blazers es un juego de Arcade, que forma...... Juega
Puzzle De Bloques
Inventado en 1984 por el ruso Alekséi Pázhitnov, e...... Juega
Magical Cat Adventure
Redescubre Magical Cat Adventure, un juego de la...... Juega

Descubrir el espacio Juegos

Tweets by @paperblog_es