CSS - Enlaces

Enlaces No Visitados

Los enlaces no visitados son el estado predeterminado de un enlace que aún no ha sido clickeado por el usuario. Por defecto, los navegadores suelen mostrar los enlaces no visitados con un subrayado y un color azul. Sin embargo, puedes cambiar estos estilos predeterminados usando CSS.

Para estilizar los enlaces no visitados, puedes usar el selector a en tu código CSS.

a {
  color: #ff0000;
  text-decoration: none;
}

Los enlaces no visitados tendrán un color rojo (#ff0000) y se eliminará el subrayado (text-decoration: none).

Puedes aplicar varios estilos a los enlaces no visitados, como cambiar el grosor de la fuente, el tamaño de la fuente, el color de fondo o agregar bordes.

a {
  color: #333;
  font-weight: bold;
  border-bottom: 2px solid #333;
  transition: border-bottom-color 0.3s;
}

Este estilo dará a los enlaces no visitados un color gris oscuro, fuente en negrita y un borde inferior sólido que hace una transición al pasar el ratón por encima.

Enlaces Visitados

Los enlaces visitados son aquellos que ya han sido clickeados y visitados por el usuario. Los navegadores suelen mostrar los enlaces visitados con un color púrpura para diferenciarlos de los no visitados.

Para estilizar los enlaces visitados, puedes usar la pseudo-clase :visited en tu código CSS.

a:visited {
  color: #800080;
}

Los enlaces visitados tendrán un color púrpura (#800080).

Por razones de privacidad, los estilos para enlaces visitados son limitados. Solo puedes cambiar sus propiedades de color como background-color o border-color.

a:visited {
  color: #999;
  border-bottom-color: #999;
}

Esto da a los enlaces visitados un color gris claro y un borde inferior del mismo color.

Estado Hover

El estado hover se activa cuando los usuarios pasan el ratón por encima de un enlace. Esto te permite crear efectos interactivos y proporcionar retroalimentación visual.

Para estilizar los enlaces al pasar el ratón por encima, usa la pseudo-clase :hover en tu código CSS.

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

Cuando los usuarios pasan el ratón sobre cualquier hipervínculo, su color cambia a rojo (#FF0000) y se subraya.

También puedes aplicar diferentes estilos a los hipervínculos al pasar el ratón, como cambiar fondos, bordes, transformaciones, etc.

a:hover {
  background-color: #f5f5f5;
  border-bottom-color: #FF0000;
  transform: translateY(-2px);
}

Esto resultaría en dar un fondo gris claro junto con un borde inferior rojo y un ligero movimiento hacia arriba.

Estado Activo

Los estados activos se activan cuando se hace clic en cualquier hipervínculo, proporcionando retroalimentación visual que indica el estado actual de la interacción. Para estilizar hipervínculos activos, utiliza la pseudo-clase :active dentro del código CSS.

a:active {
  color: black;
  background-color: #F5F5F5;
}

Al hacer clic en dicho hipervínculo, su color se vuelve negro mientras que el fondo cambia a un tono grisáceo claro (#F5F5F5).

Se pueden aplicar varias otras estilizaciones a los hipervínculos activos, incluyendo la alteración de fuentes, pesos, bordes, transformaciones, etc.

a:active {
  font-weight: bold;
  transform: scale(95%);
}

Tal estilo hace que las fuentes sean más gruesas además de encogerse ligeramente a través de la escala al noventa y cinco por ciento durante los eventos de clic. Recuerda, los estados activos permanecen temporales, durando solo hasta que persisten los clics, después de lo cual vuelven al estado de hover o no visitado según corresponda.

Al combinar estilos para diferentes estados de enlaces (no visitados, visitados, al pasar el ratón, activos), creas experiencias interactivas visualmente atractivas mejorando la usabilidad general en las páginas web.

Color

La propiedad color establece el color del texto del enlace. Puedes usar nombres de colores, valores hexadecimales, RGB o HSL para especificar el color deseado.

a {
  color: #ff0000; /* Color rojo */
}

Decoración de Texto

La propiedad text-decoration se usa para agregar o quitar subrayados, sobrelineados o tachados de los enlaces. Por defecto, los enlaces están subrayados.

a {
  text-decoration: none;
}

Color de Fondo

La propiedad background-color establece el color de fondo del enlace. Esto puede ser útil para crear enlaces tipo botón o resaltar enlaces importantes.

a {
  background-color: #f5f5f5;
  padding: 5px 10px;
}

Borde

La propiedad border te permite agregar bordes alrededor de los enlaces. Puedes establecer el ancho, estilo y color del borde usando las propiedades border-width, border-style y border-color.

a {
  border: 2px solid #000;
  padding: 5px 10px;
}

Relleno y Margen

La propiedad padding agrega espacio dentro del enlace, mientras que la propiedad margin agrega espacio fuera del enlace. Estas propiedades controlan el tamaño y espaciado de los enlaces.

a {
  padding: 10px;
  margin: 5px;
  display: inline-block;
}

Estilos de Fuente

Puedes modificar las fuentes de los enlaces usando propiedades como font-family, font-size, font-weight y font-style.

a {
  font-family: Arial, sans-serif; 
  font-size: 16px; 
  font-weight: bold; 
  font-style: italic;
}

Transiciones y Animaciones

Las transiciones y animaciones de CSS crean efectos suaves al pasar el cursor o hacer clic en los enlaces.

a {
  transition: color 0.3s ease;
}
a:hover {
  color: #ff0000;
}

Estilos básicos de botón de enlace

a.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

El enlace con la clase "button" tendrá un color de fondo azul (#007bff), color de texto blanco (#fff), relleno de 10 píxeles en la parte superior e inferior y 20 píxeles en la izquierda y derecha, sin subrayado (text-decoration: none), y esquinas redondeadas con un radio de borde de 4 píxeles.

Puedes modificar aún más los estilos del botón para que se ajusten a tu diseño. Por ejemplo, puedes agregar un borde, cambiar el color de fondo al pasar el cursor, o aplicar una sombra.

Mejorando los estilos de botón de enlace

a.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #007bff;
  transition: background-color 0.3s ease;
}

a.button:hover {
  background-color: #0056b3;
}

En esta versión mejorada, el botón de enlace tiene un borde sólido del mismo color que el fondo. La propiedad transition se usa para animar el cambio de color de fondo al pasar el cursor. Cuando pasas el cursor sobre él, cambia a un tono más oscuro (#0056b3).

Los botones de enlace se usan comúnmente para acciones importantes o enlaces destacados dentro de una página web. Ayudan a dirigir la atención de los usuarios y los animan a hacer clic. Algunos ejemplos incluyen:

1. Botones de acción primaria se usan para acciones principales como "Registrarse" o "Comprar Ahora". Generalmente tienen colores destacados.
2. Botones de acción secundaria se usan para acciones menos importantes.
3. Botones de contorno tienen fondos transparentes con bordes de color.
4. Botones con degradado usan transiciones graduales entre colores como fondos.

Al diseñar botones de enlace, mantén la consistencia en todo tu sitio web usando colores, tamaños y estilos que coincidan con el diseño general y la imagen de marca de tu sitio web.

Añadir iconos usando imágenes de fondo

a.icon-link {
  padding-left: 25px;
  background-image: url('path/to/icon.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
}

El enlace con la clase "icon-link" tendrá un icono a la izquierda del texto del enlace. La propiedad padding-left crea espacio para el icono, y la propiedad background-image especifica dónde encontrar el archivo de imagen del icono.

La propiedad background-repeat se establece en no-repeat para evitar la repetición, y la propiedad background-position lo coloca en el centro izquierda. La propiedad background-size establece su tamaño en 20 píxeles por 20 píxeles.

Uso de sprites CSS para iconos de enlaces

Si tienes varios iconos o gráficos para diferentes enlaces, puedes usar sprites CSS para combinarlos en un solo archivo de imagen. Esto reduce las solicitudes HTTP y mejora el rendimiento.

a.sprite-link {
  padding-left: 25px;
  background-image: url('path/to/sprite.png');
  background-repeat: no-repeat;
}

a.link-1 {
    background-position:0 -0px; 
}

a.link-2 {
    background-position:-0 -50px; 
}

Una imagen sprite contiene múltiples iconos posicionados verticalmente. Cada enlace tiene una clase específica (link-1, link-2) que establece su posición dentro de esa imagen sprite.

Posicionamiento y dimensionamiento de iconos de enlaces

Puedes controlar dónde aparece un icono en relación con tu texto usando propiedades CSS como el posicionamiento (horizontal/vertical)

a.icon-link {
   padding-left: 25px;
   background-image: url('path/to/icon.png');
   background-repeat: no-repeat;
   background-position: 5px center;
}

Aquí vemos cómo nuestro icono se coloca exactamente a una distancia de cinco píxeles horizontalmente mientras sigue centrado verticalmente dentro del elemento del hipervínculo.

Para cambiar el tamaño de estos elementos visuales en pantalla, simplemente ajusta sus dimensiones mediante el atributo "Background Size":

a.icon-link {
   padding-left: 35px;
   background-image: url('path/to/icon.png');
   background-repeat: no-repeat;
   background-position: left center;
   background-size: 30px 30px; 
}

Añadir texto alternativo accesible y relevante mediante atributos ARIA label garantiza que todos se beneficien por igual, independientemente de las discapacidades que puedan tener al navegar por páginas web que contengan hipervínculos mejorados visualmente.