Conceptos básicos de CSS: diseñar enlaces como un jefe | Programar Plus ▷ Tutoriales

La web se basa en enlaces. La idea de que podemos hacer clic / tocar un enlace y navegar de una página web a otra es cómo navegar por la web se convierte en una frase familiar.

Los enlaces en HTML incluso se ven diferentes del texto normal sin ningún estilo CSS.

CodePen Insertar respaldo

Son azules (violetas si se visitan). Están subrayados. Ese es un enlace en su forma más pura.

Pero, ¿y si queremos cambiar un poco las cosas? Quizás el azul no funcione con el diseño de su sitio web. Quizás tengas aversión a los subrayados. Cualquiera sea la razón, CSS nos permite diseñar enlaces como cualquier otro elemento. Todo lo que tenemos que hacer es apuntar al elemento en nuestra hoja de estilo.

¿Quiere usar una fuente diferente, cambiar el color, quitar el subrayado y ponerlo todo en mayúsculas? ¿Seguro Por qué no?

a {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}

CodePen Insertar respaldo

¡Ahora estamos cocinando con gas! Pero, ¿por qué detenerse ahí? Veamos algunas otras formas en que podemos diseñar enlaces para completar la experiencia.

Aplicar estilo a cada estado de enlace

Los enlaces tienen diferentes estados, lo que significa que se adaptan cuando interactuamos con ellos en una página web. Hay tres estados adicionales de un enlace que vale la pena considerar cada vez que cambiamos el estilo predeterminado de los enlaces:

Enlace (:link): Este es probablemente el menos utilizado, pero es para peinar. <a> elementos que tienen un href, en lugar de enlaces de marcador de posición.
Visitó (:visited): La apariencia de un enlace en el que el usuario ha hecho clic en la página antes cuando el cursor del mouse no está encima de ella. Los estilos a los que puede aplicar :visited están restringidos por razones de seguridad.
Flotar (:hover): Cuando el cursor del mouse se coloca en la parte superior del enlace sin hacer clic
Activo (:active): Cuando se está haciendo clic en el enlace. Puede ser muy rápido, pero esto es cuando se presiona el botón del mouse y antes de que termine el clic.
Enfocar (:focus): Me gusta :hover pero donde el enlace se selecciona usando la tecla Tab en un teclado. Los estados de desplazamiento y enfoque a menudo se diseñan juntos.

Tenga en cuenta que el orden allí es importante:

Enlace
Visitó
Flotar
Activo
Enfocar

Si no lo hace en este orden (imagine, digamos, su :visited el estilo viene después de tu :hover estilo) los enlaces no se comportarán como usted desea. En mi ejemplo imaginario, el :visited el estilo anularía el :hover estilo, que es muy poco probable que sea lo que desea. El enfoque es una característica de accesibilidad, por lo tanto, dura porque es más importante.

Una forma de recordar el pedido. es AMOR y ODIO. eso es L (tinta) OV (isted) E / H (over) A (Active) TE.

Aquí está el mismo enlace que hemos estado viendo. Primero, intente colocar el mouse sobre él sin hacer clic y observe que está subrayado. Luego, haga clic en el enlace, pero deje el botón del mouse presionado un poco para ver cómo el estilo activo cambia el color del enlace a negro. Finalmente, suelte el botón del mouse y el enlace debería volverse violeta antes de que sea técnicamente visitado.

CodePen Insertar respaldo

Los enlaces parecen un concepto simple, pero tienen mucho en juego, ¡y CSS nos da un poder increíble para personalizar la experiencia!

Enlaces como botones

Si bien existe cierto debate al respecto, podemos usar CSS para hacer que un enlace de texto parezca un botón.

Al igual que otros elementos HTML, CSS puede agregar colores de fondo y relleno a los enlaces que nos permiten crear la apariencia de un botón. Aquí está nuestro enlace usando esas técnicas:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

CodePen Insertar respaldo

¡Estupendo! Ahora, usemos los poderes de alteración de estado que aprendimos en la última sección para hacer que nuestro botón falso sea más interactivo. Haremos que el botón sea gris oscuro al pasar el mouse, negro al activo y gris claro en la visita:

a {
  background-color: red;
  color: white;
  padding: 1em 1.5em;
  text-decoration: none;
  text-transform: uppercase;
}

a:hover {
  background-color: #555;
}

a:active {
  background-color: black;
}

a:visited {
  background-color: #ccc;
}

CodePen Insertar respaldo

Diseñar un enlace como un botón y aprovechar los estados nos permite crear algunos efectos geniales. Por ejemplo, creemos un botón con cierta profundidad que parece que se presiona cuando está activo y que vuelve a aparecer cuando se hace clic.

CodePen Insertar respaldo