Navegação personalizada com efeito hover degradê

julho 2012

Navegação personalizada com efeito hover degradê

Postado por Anny S. | | 34 comentários.

Pra combinar com o frio que tá fazendo aqui no RS: uma imagem que tem tudo a ver com o inverno!

Já tinham me pedido esse tuto, e cá estou eu pra posta-lo! Nesse tuto você vai aprender a colocar fundo colorido nos links "postagens recentes" "ínicio" e "postagens antigas", igual aqui no GI!
Aprendi esse tutorial no Perfeitinha, com a Thais e fiz algumas alterações -como o degradê- :3

O resultado será semelhante à esse:

Entre no seu html e procure pela tag  #blog-pager { (ela fica dentro da tag /* Posts) feito isso adicione o código abaixo acima dessa tag.

/* Navegação com efeito hover degradê - http://goimagines.blogspot.com.br */

#blog-pager {

clear:both;

text-align: center;

margin:0px auto;

padding:10px;

}

#blog-pager a:link, #blog-pager a:visited{

color: #ffffff; /* cor da fonte */ 

font-size: 16px; /* tamanho da fonte */ 

padding:5px;

background-color: #8BC2C9; /* cor do fundo */ 

-moz-border-radius:10px; /* bordas arredondas, apague se não quiser */ 

-khtml-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

#blog-pager a:hover{

color: #ffffff; /* cor da fonte hover*/ 

padding:5px;

background: #BFCED5; /* fundo hover, apague o código abaixo até } se não quiser degradê */ 

background: -webkit-gradient(linear, left top, left bottom, from(#BFCED5), to(#8BC2C9));/* webkit browsers */

background: -moz-linear-gradient(top, #BFCED5, #8BC2C9);/* firefox3.6+ */

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#BFCED5', EndColorStr=' #8BC2C9');/* IE */

}

#blog-pager-newer-link {

float: left;

}

#blog-pager-older-link {

float: right;

}

Acho que não tem muito o que explicar, uma vez que tem as instruções no código, só quanto ao degradê, altere as cores conforme quiser, trabalhando com duas cores de preferência (no código foi usado #8BC2C9 e #BFCED5)