3 Estilos de enlaces en CSS para mejorar tu diseño web

by WinsTon porras

Los enlaces son una parte fundamental en la maquetación de un proyecto web y estos se pueden convertir en algo hermoso dándoles estilos con CSS.

En esta ocasión vamos a mostrarte 3 ejemplos de estilo para enlaces que en unas muy pocas líneas de código CSS darán mas vida a tu diseño web, lo mejor es que son realmente sencillos de aplicar espero que los aprovechen.

Selectores para dar estilos en CSS a los enlaces.

Antes de empezar a mostrar los ejemplos nos gustaría hablar de los selectores para definir los estados de los enlaces estos son:

  • :link, su estado natural cuando no se a interactuado con el enlace.
  • :visited, estado en el que queda un enlace visitado y vuelve a cargar la web.
  • :hover, cuando se sitúa el curso por encima.
  • :active, el mismo instante en que se esta presionando en el enlace.

Aplicando los estilos CSS a los enlaces(ejemplos).

1- Les compartimos el primer ejemplo lo dividiremos en el código HTML primero y luego el CSS para no crear confusión.

 <p class="link1">Este es un ejemplo de enlace <a href="/">Aqui va la etiqueta A</a></p>

Este es un estilo muy sencillo crea un efecto de higthligth sobre el enlace que realmente se ve muy bien ideal para blogs y links de menús.

.link1 a {
color: #343139;
text-decoration: none;
border-bottom: .125em solid #ff6407;
box-shadow: inset 0 -0.125em 0 #ff6407;
transition: box-shadow 270ms cubic-bezier(0.77, 0, 0.175, 1), color 270ms cubic-bezier(0.77, 0, 0.175, 1);
}

.link1 a:hover {
box-shadow: inset 0 -1.125em 0 #ff6407;
color: #000;
}

2- el segundo ejemplo es mucho mas simple y lleva menos código CSS aun. Como en el ejemplo anterior empiezo mostrándoles el HTML del ejemplo, luego el CSS y el resultado final por ultimo.


<div class="link2"><a>Ejemplo hover de Izquierda a derecha</a></div>

Espero que lo usen en proximos proyectos. 


.link2 a {
padding: 0 25px;
box-shadow: inset 0 0 0 0 pink;
transition: all 1.2s ease-in-out 0s;
}
.link2 a:hover{
box-shadow: inset 400px 0 0 0 orange;
transition: 200ms;
}

3- Este es mi favorito, lo cree tratando de implementarlo en una web de un cliente echa a la medida y resulto ser eficiente pues anteriormente había en esta web un código super extenso para decorar los enlaces del blog esta fue la solución que hayamos.


<p class="link5">Ejemplo numero 3 <a href="/">Enlace seria aquí</a></p>


.link5 a {
color: black;
background-image: linear-gradient(to bottom, transparent 50%, #fcf113 0);
background-size: 0% 100%;
background-repeat: no-repeat;
text-decoration: none;
transition: background-size 1s ease;
}
.link5 a:hover {
background-size: 100% 100%;
cursor: pointer;
text-decoration: underline;
text-decoration-color: #6a6b58;
}