Enlaces

Los estilos más sencillos que se pueden aplicar a los enlaces son los que modifican su tamaño de letra, tipo de letra, color de fondo. Aquí veremos como gobernar su color, pero no deberías cambiar el text_decoration porque es un estandar de los enlaces y confundirás a los visitantes de tu pagina.

1. Pseudoclases

Existen algunas Pseudoclases especificas para enlaces.

Pseudoclases aplicables a enlaces
PseudoclaseDescripción
:linkEnlace no visitado aun.
:visitedEnlace ya visitado.
:hoverCon el mouse encima.
:activeEnlace pulsado. Mientras este pulsado
a:hover {font-size: 14px;}

2. Truco de botón

Se puede hacer el efecto de un botón simplemente construyendo los elementos uno a uno, pero es indispensable que uses Pseudoclases para un buen efecto.

a:hover {font-size: 150%;}
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center; 
    text-decoration: none;
    display: inline-block;
}
a:hover, a:active {
    background-color: red;
}
a:link, a:visited {
    background-color: white;
    color: black;
    border: 2px solid green;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
a:hover, a:active {
    background-color: green;
    color: white;
}