CSS em Links: Colocar e tirar sublinhado, mudar cor, colocar plano de fundo e bordas

Neste Tutorial de CSS de nosso curso, vamos aprender um pouco mais como estilizar links através do CSS.
Tutorial de CSS. Curso de HTML online grátis completo. Apostila para download
Botão criado estilizando links com CSS

Aprenderemos como retirar sublinhado, inserir, mudar cor do link, inserir uma cor de plano de fundo, bordas etc. Você verá como essas opções do CSS nos permitirão estilizar nossos links das mais diversas maneiras, ao gosto do webmaster / webdesigner.





Já estudamos diversas maneiras de estilizar links, e no tutorial passado estudamos sobre as propriedades link, hover, visited e active dos links.

Lembrando que links também podem ser vistos como textos, textos com características especiais, mas são textos. Ou seja, também podemos aplicar as propriedades do CSS que aplicamos nos textos.

E é basicamente isso que faremos neste tutorial.
Usar diversas propriedades do CSS nos links, e veremos as inúmeras possibilidades que temos de estilizar os hiperlinks.



Sublinhado em Links: CSS text-decoration

Por padrão, os links que criamos tem um sublinhado. É tanto que, em nosso curso de HTML, todos os links textuais que criamos possuíam o sublinhado.
Obviamente, com o CSS as coisas mudam: podemos fazer o que quiser.

E faremos isso através da propriedade CSS text-decoration.

Assim, para que seus links fiquem sem sublinhado, use o código:

a {
	text-decoration: none;
}

Porém, não é bacana que os links fiquem sem estilo algum, pois irão se parecer simplesmente como o restante do texto.

Assim, um estilo CSS bastante utilizado é aquele de aparecer o sublinhado (underline) no link quando passamos o mouse em cima.
Isso é feito em CSS da seguinte maneira:

a:link {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}




Mudando a cor de Links com CSS: color

Outra maneira bem comum que vemos de se estilizar links usando CSS, é fazendo eles mudarem de cor quando passamos o mouse por cima.

Por exemplo, para que seu link seja normalmente azul e vire vermelho que você passar o mouse por cima, utilize o seguinte código CSS:

a:link {
	color: #00F;
}

a:hover {
	color: #F00;
}

Note que estamos utilizando as propriedades do CSS que usamos em textos.
Essa flexibilidade é bem comum no CSS, o que nos permite estilizar muitas coisas, de maneiras totalmente diferentes. Tudo depende de sua criatividade.



Plano de Fundo em Links usando CSS: background-color

Uma outra maneira interessante de estilizar links com CSS, é através da propriedade background-color, que muda a cor do plano de fundo de qualquer elemento HTML.

No caso, vamos mudar a cor de fundo somente do link.
No seguinte código de CSS, o plano de fundo é amarelo naturalmente.
Depois, ao passar o mouse em cima do link, ele se torna preto:

a:link {
	color: #00F;
	background-color: yellow;
}

a:hover {
	color: #F00;
	background-color: black;
}

Bordas em Links com CSS: border

Um maneira bem simples de estilizar links, através de coisas que já estudamos em nossos tutoriais de CSS, é o uso das bordas.
Caso não tenha vista, leia nosso Tutorial de CSS sobre bordas

Com bordas, você pode fazer efeitos e de uma maneira simples, que destacam bem seus links.
No exemplo a seguir, a borda aparece ao redor do link, caso você passe o mouse por cima:

a:link {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
	border: solid;
}

Lembrando, que no tutorial sobre bordas, você vai ver que existem diversos tipos de bordas, pode definir sua espessura, cor, se aparecem em todos os cantos, etc.

Criando botões usando CSS em Links

É possível criar botões usando simplesmente estilizando links com propriedades CSS.
O grande segredo daqui são as bordas.

Se lembrar bem, os botões, embora sejam em duas dimensões, passam a sensação de ser algo com profundidade. Isso pode ser conseguir colocando bordas com cores diferentes.

Para fazer o botão que mostramos no início deste tutorial de CSS, colocamos a borda inferior do link com uma cor mais escura. A borda superior mais clara, e as laterais entre uma e outra.
Essa diferença na cor dará o efeito de profundidade.

Quando passarmos o mouse por cima do "botão" (link estilizado), tudo fica da mesma cor, dando a impressão de botão pressionado, veja como fica o código CSS:

a:link {
	background: #B1B1B1;
	color: #FFF;
	text-decoration: none;
	font-weight: bold;
	border-width: 4px;
	border-style: solid;
	border-top-color: #DFDFDF;
	border-right-color: #666;
	border-bottom-color: #333;
	border-left-color: #858585;

}

a:hover {
	background: #B1B1B1;
	color: #FFF;
	font-weight: bold;
	border-color: #B1B1B1;
}

Para entender como simular botões e profundidade, imagine que existe uma luz acima do botão.
Assim, a borda de cima é mais clara, e a borda inferior é escura, pois está na sombra.
As bordas laterais tem uma cor entre sombra e iluminada.

Isso é bem simples de se fazer e entender atualmente, porém, antes do CSS, isso dava uma trabalheira só.
Se usava imagens para simular botões, se colocava animação e efeitos através do JavaScript e outras técnicas mais complexas.

Ainda bem que existe o CSS hoje, não é?

3 comentários:

Exato disse...

E onde exatamente devo por isso? Não de onde começo a editar, você poderia me dizer exatamente pelo que eu devo procurar na barrinha de pesquisa quando aperto "ctrl + f" ou F3?

Abraços :)

Natane Scarpi disse...

Muito bom!

Anônimo disse...

Olá! Ótimo post, fiz teste e funciona, entretanto, no meu template não...
Eu gostaria apenas de alterar a cor e borda dos links das postagens, mas se eu adicionar o código acima do seu exemplo ou alterar no código do próprio template, todo o template altera...

Tem como mudar os links apenas dentro da postagem???

Pois se eu faço igual o seu tudo muda e isso não pode acontecer.