Link "Leia Mais" com fundo hover
Antes de começar o tutorial quero dar os créditos ao blog lindo da Tete, o Sweet Cherry! Ele é nossa fonte de hoje :3 -com algumas alterações minhas, não esqueçam hihi-
Obs: - Mude a largura de acordo com o tamanho do seu texto, 100px se encaixa muito bem para "leia mais", se for um maior como "Mais informações »" 110px se ajusta direitinho!
Faça o caminho da roça, (como diz a Gizaa) e vá em Design > Editar HTML > Ctrl+F (na nova interface: Modelo > Editar HTML > Prosseguir > Ctrl+F) E procure por: ]]></b:skin> logo acima cole:
.jump-link{As instruções estão no código, entre os /* */ é só mudar de acordo com o desejado.
float: right; /* no lado direito ou esquero, pode mudar para left */
background-color: #FF80FF; /* cor do fundo */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento emcima */
font-size: 10pt; /* tamanho da fonte */
color: #000000; /* cor da fonte */
text-align: center; /* alinhamento do texto */
width: 100px; /* largura do fundo */
opacity: 0.7; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração da volta do hover */
border-radius: 20px;
}
.jump-link:hover{
background-color: #CFD9F6; /* cor do fundo com o mouse em cima */
padding-left: 2px; /* espaçamento esquerda */
padding-right: 2px; /* espaçamento direita */
padding-bottom: 5px; /* espaçamento embaixo */
padding-top: 5px; /* espaçamento em cima */
color: #000000; /* cor da fonte */
width: 100px; /*largura do fundo com o mouse em cima */
opacity: 1.0; /* opacidade */
-webkit-transition-duration: 1.00s; /* duração do hover */
text-decoration: none; /* sem sublinhado, negrito, itálico ou tachado */
}
Obs: - Mude a largura de acordo com o tamanho do seu texto, 100px se encaixa muito bem para "leia mais", se for um maior como "Mais informações »" 110px se ajusta direitinho!
http://goimagines.blogspot.com.br/2012/06/link-leia-mais-com-fundo-hover.html
0 comentários: