Un hipervínculo de texto es un enlace que se encuentra asociado a un texto, de forma que si hacemos clic sobre ese texto, navegamos dónde indique el hipervínculo, y queremos que esa transición se realice con algún efecto original.
Hace un tiempo vimos un artículo parecido en Enlaces con efectos creativos y originales.
Índice del artículo
Ejemplos de estilos y efectos para enlaces de texto
En este artículo veremos estilos y efectos diferentes al anterior, utilizando solamente HTML y CSS. La idea es utilizar pseudo-elementos y animaciones para crear un efecto sutil, moderno y también un poco de SVG (en los dos últimos estilos). La idea de este artículo es inspiraros con estos enlaces de texto y que vosotros los personalicéis mejor que yo para que queden más vistosos y a vuestro gusto.
Estos enlaces han sido probados en los principales navegadores en sus últimas versiones dónde funcionan correctamente. Solamente Explorer en algún efecto se comporta de forma extraña ya que no es del todo compatible con las transiciones de pseudo-elementos, pero Explorer hace ya tiempo que se fue para no volver, por suerte.
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 realizar 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 img, copiamos y pegamos el archivo de imagen .svg a nuestra carpeta de imágenes o la subimos a medios. Este archivo lo necesitamos para realizar uno de los enlaces. Luego en el archivo CSS acordaros de poner la ruta correcta donde los tengáis alojado.
Ahora abrimos la carpeta CSS, copiamos todo lo que hay dentro del archivo style-enlacesmodernos.css y lo pegamos dentro del archivo principal CSS de nuestro Child Theme. Podéis cambiar cualquier estilo o añadir otros elementos para que quede mejor en vuestro sitio web.
Para lograr el apilamiento deseado de los anclajes y sus pseudo-elementos se ha creado una clase llamada enlacesmodernos, con la que establecemos algunos estilos generales. Para los dos últimos estilos hemos creado una clase llamada svg-wrap.
.enlacesmodernos {
position: relative;
z-index: 1; /* Necesario para establecer el pseudo-elemento z-index */
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.enlacesmodernos a {
position: relative;
display: inline-block;
outline: none;
color: #fff;
font-size: 19px;
vertical-align: bottom;
text-decoration: none;
white-space: nowrap;
}
.enlacesmodernos p {
font-family: 'Lato';
font-size: 17px;
color: #ccc;
line-height: 30px;
}
.enlacesmodernos a::before,
.enlacesmodernos a::after {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.svg-wrap { /* Para los dos últimos efectos */
position: absolute;
width: 0px;
height: 0px;
overflow: hidden;
}
Todo el código que hay después en el archivo CSS es para realizar y configurar los distintos efectos de los enlaces.
Para que estos enlaces funcionen, sólo nos quedará poner el código HTML. Dentro de la carpeta demo está todo el código HTML de los ejemplos de enlaces vistos anteriormente. Por ejemplo, si vamos a poner el enlace con el efecto Scale down, el código HTML sería el siguiente.
<section class="link-scaledown enlacesmodernos"> <p>Este es un <a href="#">ejemplo</a> de enlace con el efecto <a href="#">Scale down</a> del tutorial.</p> </section>
En la mayoría de los casos, el HTML es tan simple cómo el que acabamos de ver. Con estos sencillos pasos conseguiremos darle un toque original a nuestros enlaces.
!Si te gustó este artículo, no dejes de visitar el blog o suscribirte a la newsletter! | Iborra Web Design
