HTML-CSS: Estilos diferentes para links

figure figcaption html 5
HTML 5: elementos figure e figcaption
14 Abril, 2013
desativar widgets do wordpress
Desativar Widgets pré-definidos no WordPress
22 Abril, 2013
Mostrar tudo
estilos diferentes para links

Então, como mudar estilo de sublinhado de links em uma página web? É fácil! Você só tem que definir os vários estilos CSS sem usar o ‘text-decoration’. Neste pequeno tutorial vamos ver algumas técnicas CSS para aplicação de estilos diferentes para links em uma página web.

A ideia principal aqui exemplificada, é que você desabilite ‘text-decoration‘ para os links, em seguida, criar links para ter um modelo de caixa, adicionando a exibição com o valor inline-block. Depois disso, podemos mudar as bordas, preenchimento e margens. Aqui vamos mudar a borda inferior para alcançar os resultados desejados.

Estilos diferentes nas bordas

Na borda inferior, você pode alterar o tamanho, estilo e cor, esta pode ser solida, pontilhada ou tracejada. Mas se quiser, pode alterar qualquer outra borda com CSS.

/* Links */

a {
  border-bottom: 1px dashed #ffa500;
  color: #a66c00;
  display: inline-block;
  line-height: 100%;
  text-decoration: none;

  -moz-transition: all .5s;
  -o-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s;
}

a:hover {
  border-bottom-color: #a66c00;
  color: #ffa500;
}

.dotted {
  border-bottom-style: dotted;

E você costuma usar estas técnicas CSS? Conhece outras formas? Comente!

Um abraço e até já!

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *