Enlaces CSS
Con CSS, los enlaces se pueden diseñar de muchas maneras diferentes.
Enlace de texto Enlace de texto Botón de enlace Botón de enlace
Estilo de enlaces
Los enlaces se pueden diseñar con cualquier propiedad CSS (por ejemplo color, font-family,
background, etc.).
Ejemplo
a {
color: hotpink;
}
Además, los enlaces pueden tener un estilo diferente según el estado en el que se encuentren.
Los cuatro estados de enlace 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
Ejemplo
/* unvisited link */
a:link {
color: red;
}
/* visited
link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
Al establecer el estilo para varios estados de enlace, existen algunas reglas de orden:
- a:hover DEBE venir después de a:link y a:visited
- a:active DEBE venir después de a:hover
Decoración de texto
La text-decorationpropiedad se usa principalmente para eliminar los subrayados de los enlaces:
Ejemplo
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Color de fondo
La background-colorpropiedad se puede utilizar para especificar un color de fondo para los enlaces:
Ejemplo
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Botones de enlace
Este ejemplo muestra un ejemplo más avanzado en el que combinamos varias propiedades de CSS para mostrar enlaces como cuadros/botones:
Ejemplo
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;
}
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:visited {color:
#0000ff;}
a.two:hover {font-size: 150%;}
a.three:link {color:
#ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background:
#66ff66;}
a.four:link {color: #ff0000;}
a.four:visited {color:
#0000ff;}
a.four:hover {font-family: monospace;}
a.five:link {color:
#ff0000; text-decoration: none;}
a.five:visited {color: #0000ff;
text-decoration: none;}
a.five:hover {text-decoration: underline;}
Ejemplo
Otro ejemplo de cómo crear cuadros/botones de enlace:
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;
}
Ejemplo
Este ejemplo demuestra los diferentes tipos de cursores (puede ser útil para enlaces):
<span style="cursor: auto">auto</span><br>
<span style="cursor:
crosshair">crosshair</span><br>
<span style="cursor:
default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor:
move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor:
nw-resize">nw-resize</span><br>
<span style="cursor:
pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor:
se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor:
w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>