27-Enlaces en CSS: Diseña Navegación Efectiva 🔗

---

Enlaces en CSS

• Enlaces en CSS
• Estilización de Enlaces con Propiedades CSS
• Estados de los Enlaces
• Cambiar el Cursor al Pasar por el Enlace
• Enlaces como Cajas/Botones

---

Enlaces en CSS

Los enlaces en CSS pueden ser estilizados de diversas maneras, lo que permite personalizar su apariencia en función del estado en el que se encuentren (por ejemplo, normal, visitado, al pasar el ratón, o al hacer clic).

Para estilizar enlaces, se utilizan selectores específicos de CSS como a:link, a:visited, a:hover y a:active, los cuales se aplican a diferentes estados del enlace.

A continuación, te mostramos cómo aplicar algunos de estos estilos básicos utilizando propiedades como color, text-decoration y background-color.

Ejemplos Visuales

Ejemplo 1: Estilo de enlaces en diferentes estados

a:link {
    color: blue;
}
a:visited {
    color: purple;
}
a:hover {
    color: red;
    text-decoration: underline;
}
a:active {
    color: green;
}
                

Ejemplo 2: Enlace con fondo y cambio de color al pasar el ratón:

a:link {
    background-color: yellow;
    padding: 5px;
}
a:hover {
    background-color: green;
    color: white;
}
                

---

---

Estilización de Enlaces con Propiedades CSS

En CSS, se pueden aplicar varias propiedades para cambiar el estilo visual de los enlaces. Algunas de las propiedades más comunes para estilizar los enlaces incluyen:

• color: Para cambiar el color del texto del enlace.
• text-decoration: Para eliminar o agregar decoraciones como subrayados.
• font-family: Para cambiar la fuente del texto del enlace.
• background-color: Para definir el color de fondo de los enlaces.
• padding: Para ajustar el espacio interno dentro del enlace.
• border: Para agregar bordes alrededor del enlace.

En este ejemplo, estilizamos los enlaces con estas propiedades para hacer que se vean más atractivos y facilitar su interacción visual:

Estados de los Enlaces

En este tema se explica cómo los enlaces pueden tener diferentes estilos en función de su estado. Los estados más comunes de los enlaces son:

• a:link - Cuando el enlace no ha sido visitado.
• a:visited - Cuando el enlace ya ha sido visitado.
• a:hover - Cuando el enlace está siendo hovered (pasando el cursor sobre él).
• a:active - Cuando el enlace está siendo clicado.

Estos estados se pueden estilizar usando CSS para cambiar su apariencia dependiendo de la interacción del usuario.

Ejemplos Visuales: Estados de los Enlaces

A continuación, se muestran los diferentes estados de los enlaces:

Enlace no visitado:

Este es un enlace no visitado

Enlace visitado:

Este es un enlace visitado

Enlace en hover (pasando el cursor):

Este es un enlace en hover

Enlace activo (clicado):

Este es un enlace activo

/* Enlace no visitado */
a:link {
  color: #ff6347; /* Color del texto */
  text-decoration: none; /* Sin subrayado */
}

/* Enlace visitado */
a:visited {
  color: #8e44ad; /* Color del texto después de ser visitado */
}

/* Enlace en hover */
a:hover {
  color: #fff; /* Color de texto al pasar el cursor */
  background-color: #ff6347; /* Fondo al pasar el cursor */
}

/* Enlace activo */
a:active {
  color: #fff; /* Color de texto al hacer clic */
  background-color: #4caf50; /* Fondo al hacer clic */
}
            
            

---

Cambiar el Cursor al Pasar por el Enlace

En este tema aprenderemos cómo cambiar el cursor al pasar sobre un enlace. Por defecto, el cursor es una flecha cuando está sobre un enlace, pero es posible cambiarlo a otros tipos, como una mano o un puntero, utilizando la propiedad cursor de CSS.

Para cambiar el cursor cuando el usuario pasa sobre un enlace, puedes usar la siguiente propiedad CSS:

• cursor: pointer; - Este estilo hace que el cursor cambie a una mano, lo que indica que el enlace es clickeable.

A continuación, mostramos cómo implementar esta propiedad en los enlaces:

Ejemplos Visuales: Cambiar el Cursor al Pasar por el Enlace

/* Cambiar cursor al pasar sobre el enlace */
a:hover {
  cursor: pointer; /* Cambiar a mano al pasar sobre el enlace */
}
            
            

---

Enlaces como Cajas/Botones

En este tema, veremos cómo transformar los enlaces en cajas o botones utilizando CSS. Al aplicar ciertos estilos, podemos dar a los enlaces la apariencia de botones, lo cual puede mejorar la experiencia de usuario.

Para hacer esto, utilizaremos propiedades como el `padding`, `border`, `background-color`, y `text-decoration` para cambiar la apariencia del enlace y hacerlo más atractivo.

Ejemplos Visuales: Enlaces como Cajas/Botones

A continuación, un ejemplo de cómo estilizar enlaces para que se vean como botones:

Enlace Estilizado como Botón

En este caso, el enlace tiene un fondo verde, texto blanco, y bordes redondeados, simulando la apariencia de un botón. Este es un enlace estilizado, pero visualmente se comporta como un botón interactivo.

/* Enlace estilizado como botón */
a.btn-link {
    display: inline-block;
    background-color: #4caf50; /* Color de fondo */
    color: white; /* Color del texto */
    padding: 12px 24px; /* Espaciado del enlace */
    text-align: center; /* Alineación del texto */
    text-decoration: none; /* Sin subrayado */
    border-radius: 8px; /* Bordes redondeados */
    font-weight: bold; /* Negrita */
}

a.btn-link:hover {
    background-color: #45a049; /* Color de fondo en hover */
}
            
            

---

Ir al índice

---