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

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo