
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.
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;
}
¡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 unhref
, 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.
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;
}
¡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;
}
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.
¡Oh, y cursores!
Hemos profundizado bastante en los enlaces de estilo, pero hay un componente más que no podemos ignorar: el cursor.
El cursor indica la posición del mouse en la pantalla. Estamos bastante acostumbrados a la flecha negra estándar:
La flecha estándar del cursor del mouse
Podemos cambiar la flecha a un puntero de mano en su desplazamiento (:hover
) para que sea más fácil ver que el enlace indica que es un elemento interactivo:
Utilizando
cursor:
proporciona una pista interactiva.
pointer;
a:hover {
cursor: pointer;
}
¡Vaya, eso es mucho mejor! Ahora, tenemos un enlace bastante elegante que parece un botón con las señales interactivas adecuadas.
Subir de nivel
Hemos cubierto bastante terreno aquí, pero simplemente rasca la superficie de cómo podemos controlar el estilo de los enlaces. Si estás listo para subir de nivel, aquí tienes algunos recursos a los que puedes acceder desde aquí:
- Vínculos de Mailto: una buena referencia para vincular direcciones de correo electrónico en lugar de páginas web.
- El estado actual de los enlaces telefónicos: ¿Sabía que puede vincular un número de teléfono? Bueno, así es como.
- Cursor: la guía de referencia Programar Pluspara personalizar el cursor.
- Cuándo usar el elemento de botón: si se está preguntando acerca de la diferencia entre un botón de enlace y un botón de formulario tradicional, esta es una buena descripción general con sugerencias sobre cuál es mejor para contextos específicos.
- Button Maker: un recurso gratuito para generar CSS para botones de enlace.