Tuto - Sidebar com efeito Hover

Yo Minna-Sama 

Tudo Bem com vocês ? Espero que sim , Eu entrei para o time de handbol do colégio onde eu estudo , é legal , fico com os meus amigos e talz lá jogando . Bom , Hoje vim trazer um tutorial bem legal de como por a sidebar com efeito hover ! (Créditos: ♥ ) Vamos começar ? Go Go Go >>

Vá em seu html e procure por : .sidebar .widget {

Em baixo dessa tag , cole : 

background: #CorDoFundo;font-family: calibri; /*Mude a fonte conforme seu gosto*/font-size: 10px; /*Tamanho da fonte*/color: #CorDaFonte;padding: 10px; /*Não modifique aqui*/ border: 10px solid #CorDaBorda; /*Grossura da borda, que é sólida, a cor é você quem escolhe.*/border-radius: 5px 50px 5px 50px; /*Bordas arredondadas*/ -webkit-transition-duration: 1.50s; /*duração da transição*/ }

.sidebar .widget:hover {background:#CorDoFundoAoPassarOMouse;border: 10px solid #CorDaBordaAoPassarOMouse;border-radius: 50px 5px 50px 5px; /*Bordas arredondadas*/}

o Código já está todo explicado , mas se tiver dúvidas me perguntem pelos comentários ok ? 

Caso precise de um gerador de cores : ♥