Enlaces con efectos creativos y originales

Los enlaces de texto son uno de los factores más importantes de una página para que tenga un buen posicionamiento web. Para destacar estos enlaces, al hacer clic sobre el texto, haremos que esa transición se realice con algún efecto creativo y original.

Hace un tiempo vimos un artículo parecido en Diferentes estilos y efectos para los enlaces de texto.

Ejemplos de efectos creativos y originales para enlaces de texto

En este artículo me gustaría compartir algunos enlaces con efectos creativos. La idea es utilizar pseudo-elementos y animaciones para crear un efecto sutil y moderno.

A continuación podéis probar los enlaces en la página de CodePen, sólo tenéis que pasar el cursor por encima del enlace de texto para ver su efecto. Los podéis personalizar como queráis.

Ver ejemplos en CdePen

Código para implementar estos enlaces de texto

Para realizar estos enlaces, primero descargamos los archivos, el enlace de descarga se encuentra más abajo. Dentro del archivo descargado encontramos tres carpetas. Abrimos la carpeta js, copiamos y pegamos el archivo modernizr.custom.js a nuestra carpeta js y hacemos una llamada a esta librería en nuestro archivo functions.php. Si ya tenéis esta librería enlazada, saltaros este paso.

Ahora abrimos la carpeta css, copiamos todo lo que hay dentro del archivo style-enlacescreativos.css (o el código css que necesitemos) y lo pegamos dentro del archivo principal css de nuestro tema. Podéis cambiar cualquier cosa a vuestro gusto o añadir otros elementos css para que quede mejor en vuestro sitio web. Este es el código, por ejemplo, del enlace 1, dónde utilizamos las transiciones de pseudo-elementos para conseguir el efecto.

.cl-effect-1 a {
	color: #28262b;
	text-transform: uppercase;
	font-family: 'Lato';
	font-size: 17px;
        text-decoration: none;
}

.cl-effect-1 a:hover {
	color: #28262b;
}

.cl-effect-1 a::before,
.cl-effect-1 a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-effect-1 a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
	color: #c39f76;
}

.cl-effect-1 a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
	color: #c39f76;
}

.cl-effect-1 a:hover::before,
.cl-effect-1 a:hover::after,
.cl-effect-1 a:focus::before,
.cl-effect-1 a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}

Una vez puesto los archivos anteriores, sólo nos quedará poner el código HTML del enlace que vayamos a utilizar. Dentro de la carpeta demo está todo el código HTML de los ejemplos de enlaces vistos anteriormente. A continuación, un ejemplo de como sería el código para mostrar el enlace 1.

<nav class="cl-effect-1">
    <a href="#">enlace 1</a>
</nav>

En la mayoría de los casos, el HTML es tan simple cómo el que acabamos de ver, sin embargo, para algunos efectos, se utilizan otros atributos que encontraréis en el archivo demo.php. Espero que con esta colección de enlaces encontréis inspiración y también podáis crear otros efectos agradables.

!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design