CREDITOS : templatesparanovoblogger
float:right; // aqui estabeleço que o link aparecerá à direita
margin: 0px 15px 10px 0px; // distância do link para o topo, direita, esquerda e base
font-size:13px; // tamanho da fonte do link
text-indent: 19px; // o quanto o link se afasta ou recua da esquerda
font-weight:normal; // tipo de fonte
padding: 0px 0px; // espaçamento
background: url(link da imagem) no-repeat center left; // imagem/ícone que aparece à esquerda do link
}
.jump-link a, .jump-link a:visited{color:#0066CC; text-decoration: none; //cor do link em estado normal}
.jump-link a:hover{color:#0066CC; text-decoration: none; // cor do link em estado hover}
Retirei este exemplo do Template Mundo Verde e o resultado pode ser visto aqui.
Você pode optar por não usar um ícone mas criar um botão com bordas arredondadas com uma imagem de fundo, como uso aqui no TNB. Para isso, basta:
.jump-link{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 4px 6px;
float:right;
background: url(link da imagem do bg) repeat-x;}
0 comentários:
Postar um comentário