Con CSS, los enlaces se pueden diseñar de muchas formas diferentes.
Enlace de texto Enlace de texto Botón de enlace Botón de enlace
Enlaces de estilo
Los enlaces se pueden diseñar con cualquier propiedad CSS (p. Ej. color, font-family,
background, etc.).
Además, los enlaces pueden tener un estilo diferente dependiendo de qué estado ellos están en.
Los cuatro estados de enlaces son:
a:link– un enlace normal no visitadoa:visited– un enlace que el usuario ha visitadoa:hover– un enlace cuando el usuario pasa el mouse sobre éla:active– un enlace en el momento en que se hace clic en él
Ejemplo
/ * enlace no visitado * /
un enlace {
color rojo;
}
/ * enlace visitado * /
a: visitado {
color verde;
}
/ * mouse sobre el enlace * /
a: hover {
color: rosa vivo;
}
/ * enlace seleccionado * /
a: active {
color azul;
}
Inténtalo tú mismo »
Al configurar el estilo para varios estados de enlace, existen algunas reglas de orden:
- a: hover DEBE ir después de un: enlace y un: visitado
- a: active DEBE venir después de a: hover
Decoración de texto
los text-decoration La propiedad se usa principalmente para eliminar los subrayados de los enlaces:
Ejemplo
un enlace {
decoración de texto: ninguna;
}
a: visitado {
decoración de texto: ninguna;
}
a: hover {
decoración de texto: subrayado;
}
a: active {
decoración de texto: subrayado;
}
Inténtalo tú mismo »
Color de fondo
los background-color La propiedad se puede utilizar para especificar un color de fondo para los enlaces:
Ejemplo
un enlace {
color de fondo: amarillo;
}
a: visitado {
color de fondo: cian;
}
a: hover {
color de fondo: verde claro;
}
a: active {
color de fondo: rosa vivo;
}
Inténtalo tú mismo »
Botones de enlace
Este ejemplo demuestra un ejemplo más avanzado en el que combinamos varias propiedades CSS para mostrar enlaces como cuadros / botones:
Ejemplo
a: enlace, a: visitado {
color de fondo: # f44336;
color blanco;
relleno: 14px 25px;
alineación de texto: centro;
decoración de texto: ninguna;
pantalla: bloque en línea;
}
a: hover, a: active {
color de fondo: rojo;
}
Inténtalo tú mismo »
Más ejemplos
Ejemplo
Este ejemplo demuestra cómo agregar otros estilos a los hipervínculos:
a.one:link {color: # ff0000;}
a.one:visited {color: # 0000ff;}
a.one:hover {color: # ffcc00;}
a.two: link {color: # ff0000;}
a.two: visitado {color: # 0000ff;}
a.two: hover {font-size: 150%;}
a.three: link {color: # ff0000;}
a.three: visitado {color: # 0000ff;}
a.three: hover {background: # 66ff66;}
cuatro: enlace {color: # ff0000;}
cuatro: visitado {color: # 0000ff;}
cuatro: hover {font-family: monospace;}
cinco: enlace {color: # ff0000; decoración de texto: ninguna;}
cinco: visitado {color: # 0000ff; decoración de texto: ninguna;}
a.five: hover {text-decoration: underline;}
Inténtalo tú mismo »
Ejemplo
Otro ejemplo de cómo crear cuadros / botones de enlace:
a: enlace, a: visitado {
color de fondo: blanco;
de color negro;
borde: 2px verde sólido;
relleno: 10px 20px;
alineación de texto: centro;
decoración de texto: ninguna;
pantalla: bloque en línea;
}
a: hover, a: active {
color de fondo: verde;
color blanco;
}
Inténtalo tú mismo »
Ejemplo
Este ejemplo demuestra los diferentes tipos de cursores (puede ser útil para enlaces):
auto
crosshair
predeterminado
e-resize
ayuda
mover
n-resize
ne-resize
nw-resize
puntero
progreso
s-resize
se-resize
sw-resize
texto
w-resize
espera
Inténtalo tú mismo »