Coloque "Leia mais" com fundo hover


Olaa Pakitos, trago um tutor bem fácil créditos Go Imagines , simplesmente amei e trago a vocês
ficara mais ou menos assim 
Mais você pode editar ok ? então vamos la 
Bom vá em Design > Editar HTML > Ctrl+F  E procure por: ]]></b:skin> E acima cole:


.jump-link{
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 */
}


As instruções para personalizar estão entre os /* */ | Mude as larguras de acordo com seu texto  100px se encaixa muito bem para "leia mais", se for um maior como "Mais informações »" 110px

Créditos também a GI & SC

2 Comentários:

  1. Eu ñ entendi eu fiz até aquela parte q aparece um montão de letras ai me perdi toda :p

    ResponderExcluir
  2. Voce pode mandar um video p/ mim explciando melhor?

    ResponderExcluir

Bem Vindo, se você não gostou de algo eu pesso que não use palavras de baixo calão, só de sua opinião que sera colhida bem, mas nunca com palavrões e ofenças obg :)

 
Layout feito por Adália Sá | Não retire os créditos