Cómo Estilizar los Enlaces con CSS (Botones, Colores, y Más)

logo tecnonautas

Cómo Estilizar los Enlaces con CSS (Botones, Colores, y Más)

VALORACIÓN DEL ARTÍCULO:
5/5


Los enlaces son muy comunes en las páginas web, pero muchos diseñadores web no se dan cuenta del poder que tienen con CSS para manipular y administrar sus enlaces de manera efectiva. Puede definir enlaces con estados visitados, suspendidos y activos. También puedes trabajar con bordes y fondos para dar a tus enlaces más pizzaz o hacer que parezcan botones o incluso imágenes.

La mayoría de los diseñadores web empiezan por definir un estilo en la etiqueta a:

a { color: rojo; }

Esto le dará estilo a todos los aspectos del enlace (flotante, visitado y activo). Para cambiar el estilo de cada parte por separado, debe utilizar pseudoclases de enlace.

Índice de contenidos

Enlace Pseudo-Clases

Hay cuatro tipos básicos de pseudoclases de enlace que puede definir:

  • :link – este es el estilo por defecto para el enlace
  • :visited – después de hacer clic en un enlace
  • :hover – como un ratón está posicionado sobre un enlace (pre-click)
  • :active – justo cuando se hace clic en el enlace

Para definir una pseudoclase de enlace, utilícela con la etiqueta a en su selector CSS. Por lo tanto, para cambiar el color visitado de todos sus enlaces a gris, escriba:

a:visitado { color: gris; }

Si se estiliza una pseudo-clase de un eslabón, es una buena idea estilizarlas todas. De esta manera no se sorprenderá de resultados extraños. Así que si sólo quieres cambiar el color visitado a gris, mientras que todas las otras pseudo-propiedades de tus enlaces permanecen negras, escribes:

a:link, a:hover, a:active { color: negro; }a:visited { color: gris; }

Cambiar los colores de los enlaces

La forma más popular de cambiar el estilo de los enlaces es cambiar el color cuando el ratón pasa por encima de ellos:

a { color: #00f; }a:hover { color: #0f0; }

Pero no olvide que puede influir en el aspecto del enlace al hacer clic en él con la propiedad :active:

a { color: #00f; }a:activo { color: #f00; }

O cómo se ve el enlace después de haberlo visitado con la propiedad :visited:

a { color: #00f; }a:visitado { color: #f0f; }

Para ponerlo todo junto:

a { color: #00f; }a:visitado { color: #f0f; }a:hover { color: #0f0; }a:activo { color: #f00; }

Poner fondos en los enlaces para agregar iconos o viñetas

Jugando un poco con el fondo, puede crear un enlace que tenga un icono asociado. Elija un icono que sea pequeño, alrededor de 15px por 15px, a menos que su texto sea más grande. Coloque el fondo a un lado del enlace y establezca la opción de repetición en No repetición. A continuación, rellene el enlace para que el texto dentro del mismo se mueva lo suficiente a la izquierda o a la derecha para ver el icono.

a {acolchado: 0 2px 1px 15px;fondo: #fff url(ball.gif) left center no-repeat;color: #c00;}

Una vez que haya obtenido su icono, puede establecer una imagen diferente a la de sus iconos flotante, activo y visitado para hacer que el enlace cambie:

a {acolchado: 0 2px 1px 15px;fondo: #fff url(ball.gif) left center no-repeat;color: #c00;}a:hover {background: #fff url(ball2.gif) left center no-repeat;}a:active {background: #fff url(ball3.gif) left center no-repeat;}

Haga que sus enlaces parezcan botones

Los botones son muy populares, pero hasta que llegó el CSS, tenías que crear botones usando imágenes, lo que hace que tus páginas tarden más en cargarse. Afortunadamente, hay un estilo de borde que puede ayudarle a crear un efecto de botón fácilmente con CSS.

a {borde: 4px al principio; acolchado: 2px;texto-decoración: ninguno;}a:activo {borde: 4px inserto;}

Tenga en cuenta que cuando se ponen colores en los estilos de inicio y de inserción, los navegadores no son tan propensos a renderizarlos como se podría esperar. Así que, aquí hay un botón más elegante con bordes de colores:

a {border-style: solid;border-width : 1px 4px 4px 4px 1px;text-decoration : none;padding : 4px;border-color : #69f #00f #00f #69f;}

Y también puede afectar los estilos de hover y los estilos activos de un enlace de botón, simplemente use esas pseudo-clases:

a:link {border-style: solid;border-width : 1px 4px 4px 4px 1px;text-decoration : none;padding : 4px;border-color : #69f #00f #00f #69f;}a:hover { color del borde: #ccc; }

TAMBIÉN TE INTERESA

pagos por WhatsApp con Silbo

Silbo ensaya con un proyecto que es el deseo de muchos: pagos por WhatsApp

Aunque el dinero en efectivo tenga aún muchas resistencias en España, es evidente que ha entrado en una condición de peligro en extinción. Bizum triunfa y próximamente los pagos por WahstApp serán una realidad. Esta función de la plataforma de mensajería instantánea más popular en España es uno de los grandes deseos de la comunidad.

GeForce RTX Serie 50

GeForce RTX Serie 50: el futuro de las gráficas y de la IA ya está aquí

NVIDIA ha presentado sus GPUs GeForce RTX Serie 50 para ordenadores de sobremesa y portátiles. Con este lanzamiento, se abre una nueva era para el futuro de los dispositivos, los cuales estarán impulsados por la inteligencia artificial en todas sus variantes. Impulsadas por la arquitectura NVIDIA Blackwell, los núcleos Tensor de quinta generación y los núcleos

OnePlus 13

El móvil del año 2025 llega muy pronto: ya a la venta el OnePlus 13

Justo después de Reyes, OnePlus 13 salía el mercado europeo tras debutar en el asiático semanas atrás. Smartphone bestial donde los haya, muy equilibrado, potente y muy duradero. Eso sí, el precio supera los 1.000 euros. Pero es que puede ser el móvil del año. Seguramente la competencia mire con detalle todo lo que puede