Links CSS
Com CSS, os links podem ser estilizados de muitas maneiras diferentes.
Link de texto Link de texto Botão Link Botão Link
Links de estilo
Os links podem ser estilizados com qualquer propriedade CSS (por exemplo color, font-family,
background, etc.).
Exemplo
a {
color: hotpink;
}
Além disso, os links podem ter estilos diferentes dependendo do estado em que estão.
Os quatro estados de links são:
a:link- um link normal e não visitadoa:visited- um link que o usuário visitoua:hover- um link quando o usuário passa o mouse sobre elea:active- um link no momento em que é clicado
Exemplo
/* 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;
}
Ao definir o estilo para vários estados de link, existem algumas regras de ordem:
- a:hover DEVE vir depois de a:link e a:visited
- a:active DEVE vir depois de a:hover
Decoração de texto
A text-decorationpropriedade é usada principalmente para remover sublinhados de links:
Exemplo
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Cor de fundo
A background-colorpropriedade pode ser usada para especificar uma cor de fundo para links:
Exemplo
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
Botões de link
Este exemplo demonstra um exemplo mais avançado onde combinamos várias propriedades CSS para exibir links como caixas/botões:
Exemplo
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;
}
Mais exemplos
Exemplo
Este exemplo demonstra como adicionar outros estilos a hiperlinks:
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;}
Exemplo
Outro exemplo de como criar caixas/botões de link:
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;
}
Exemplo
Este exemplo demonstra os diferentes tipos de cursores (pode ser útil para links):
<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>