Efeito Hover Na Sidebar

E ai!

Estava com saudade!

Confesso que tive que largar um pouquinho o blog,por alguns motivos.

Mas,estou de volta e com um mega tutorial!

só tem um problema:

O tutorial não foi testado por min.

O tutorial é de como colocar aquele efeito bem legal de efeito hover na sidebar que muda de cor.

Clique em Leia Mais para ver o tuto!

1º-No html procure por:

/* Widgets.

2º-Logo tem :

.sidebar .widget {

3º-Logo do código acima então cole:

background: #CorDoFundo;font-family: calibri; /*FONTE*/font-size: 10px; /*Tamanho da fonte*/color: #CorDaFonte;padding: 10px; /*Não modifique aqui*/ border: 10px solid #CorDaBorda; /*BORDA*/border-radius: 5px 50px 5px 50px; /*Bordas arredondadas*/ -webkit-transition-duration: 1.50s; /*duração da transição*/ }
.sidebar .widget:hover {background:#FUNDO HOVER;border: 10px solid #BORDA HOVER ;border-radius: 50px 5px 50px  5px; /*Bordas arredondadas*/}

4º-E para personalizar + cole:

background: #fff;font-family: calibri; /*FONTE*/color: #fff;padding: 10px; /*Não modifique aqui*/border-top: 5px solid #COR DA BORDA NORMAL;border-bottom: 5px solid #COR DA BORDA NORMAL;box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;-webkit-transition-duration: 1.50s; /*duração da transição*/ }
.sidebar .widget:hover {background:#fff;border-top: 5px solid #COR DA BORDA HOVER;border-bottom: 5px solid #COR DA BORDA NORMAL HOVER;box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;}

BJO!

Crédito:Bunny Crazy