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. Aqui veremos como gobernar su color, pero no deberias cambiar el text_decoration porque es un estanadar de los enlaces y confundiras a los visitantes de tu pagina.

1. Pseudoclases

Existen algunas Pseudoclases especificas para enlaces.

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

2. Truco de boton

Se puede hacer el efecto de un boton simplemente construyendo los elementos uno a uno, pero es indisensable 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;
}
ValorDescripción