Ex menu horizontal c/hover

Boa noite,voltei aqui com uma dica de menu com efeitos hover e transição...
Na imagem acima mostra resultado final ,mas pode visualizar online:ENTRE AQUI
Lembrando que este código original pertence( @thecodeplayer )créditos ...
Modifiquei algumas coisas e agora deixarei aqui códigos abaixo.

Exemplo de menu horizontal c/transição e hover modificado.

Html do menu``

<div id='bt-menuwrapper'>
<ul class="menu_wrapbt">
  <li>
<h2>INICIO</h2>
<p>Pagina Inicial</p>
</li>
<li>
<h2>botao 2</h2>
<p>exemplo 2 botao</p>
</li>
<li>
<h2>botao 3</h2>
<p>exemplo 3 botao</p>
</li>
<li>
<h2>botao 4</h2>
<p>exemplo 4 botao</p>
</li>
</ul>
</div>

E agora css do menu abaixo``

.menu_wrapbt {
margin: 20px auto;
background: #fff;
overflow: hidden;
width: 760px ;height:auto;
box-shadow: 0 2px 10px 2px #f0f0f0;
   border-radius: 4px;
}
.menu_wrapbt li {
width: 120px; border-right: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 0px 50px 0px 5px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.menu_wrapbt li h2 {
font-family: Arial Black;
font-weight: normal;
font-style: italic;
font-size: 14px;
margin-bottom: 5px;
line-height: 10px;
}
.menu_wrapbt li p{
font-size: 11px;
  font-family: Arial Black;
    font-weight: normal;
font-style: italic;
color: #999; -webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
.menu_wrapbt li:hover {
background: #333;
border-left: 5px solid #f0f0f0;
}
.menu_wrapbt li:hover H2 {
font-weight: bold;
color: #fff;
}
.menu_wrapbt li:hover p {
color: #ccc;
padding-left: 5px;
}

Feito a partilha por hoje ficamos por aqui...Bye...

Ex menu horizontal c/hover

► 0

► dicas menus vários

► Cartita