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.

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; }

Deja un comentario

TAMBIÉN TE INTERESA

monitores-Samsung-M8

Samsung M8: un monitor que es también smart tv y mucho más…

Hay quien usa tres monitores a la vez para trabajar. El segmento de los monitores de PC avanza rápidamente. Hace solo unos años la tendencia era adquirir monitores curvos, pero hoy la dinámica vuelve al llano y, por supuesto, a la extrema delgadez. No obstante, Samsung va más allá con su nuevo monitor Samsung M8.

Huawei-P50-Pro

Las mejores aplicaciones para disfrutar el nuevo Huawei P50 Pro

Huawei ha anunciado los nuevos smartphones Huawei P50 Pro y P50 Pocket, las últimas incorporaciones a su icónica línea de productos de la Serie P. Con cada lanzamiento de la Serie P, la marca china sigue mostrando toda su capacidad innovadora ya sea a nivel de rendimiento y especificaciones de los terminales como por todo

Poly-Sync-10

Poly lanza un nuevo altavoz inteligente para el trabajo híbrido: Sync 10

Poly ha anunciado recientemente el lanzamiento del Poly Sync 10, la última incorporación a su conocida familia de altavoces inteligentes y manos libres, Poly Sync. El nuevo dispositivo responde a las necesidades emergentes de empresas y profesionales, que tienen que desenvolverse de forma eficiente en un contexto de trabajo cada vez más híbrido, flexible y

CCleaner 2022

Novedades importantes con la herramienta CCleaner

Hoy vamos a hablar de CCleaner, una herramienta que cuenta con cientos de millones de usuarios domésticos y empresariales en todo el mundo que trabaja para optimizar el rendimiento de los equipos, mejorar la seguridad de los mismos y prolongar la vida útil de los ordenadores.   CCleaner es el rey del mantenimiento en lo

resistencia-Cat-phones

Cat phones, una década brillando con los dispositivos más resistentes

Hay marcas que huyen del mainstream y son casos de éxito. Cat phones es una de esas compañías que se ha alejado de lo convencional para centrarse en otras necesidades y convertirse así en grandes expertos en la resistencia de sus dispositivos. De la mano de Bullitt Group, la firma celebra 10 años de trayectoria