Como personalizar os botões do menu?

Qual é minha questão:
Então galera da forumeiros novamente venho tirar minhas dúvidas e pegar uns códigos hahaha..
Mas então galera a minha dúvida é um seguinte.

- Olhe a visualização dessa imagem, e perceba-se essa imagem de antigo com o efeito que surge no portal apreste atenção no portal.
PrintScreen Antiga: https://i.imgur.com/EJEe1ql.png

É Logo após passar o meu mause por cima.

PrinScreen Atual: https://i.imgur.com/HqAJFjE.png

Então minha questão é essa dai, aguardo por respostas!

Endereço do meu fórum:
http://bpf-rotamforever.forumeiros.com

Versão do fórum:
PUNBB

UP!

Olá!

Não entendo qual é sua dúvida, quer o código para tal efeito? se for o código é este:

Código:

#pun-head #pun-navlinks {
background: #222 url(http://i.imgur.com/2QARA.png) repeat-x;
height: 60px;
margin: 0;
margin-left: 200px;
margin-right: 200px;
padding: 0;
z-index: 999;
border-bottom: 1px solid #EBEBEB;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 0 3px gray;
}
#pun-navlinks li a {
color: #555;
font-family: "Helvetica Neue",Arial,sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 60px;
margin: 0 .8em 0 0;
padding: 22px 0px;
}
#pun-navlinks li a[href="/"]{background: url(http://i.imgur.com/ywUSm.png) 50% 100% no-repeat;
font-weight: bold;
color: white;}

#pun-navlinks li a:hover {color: white;
    text-decoration:none;
    background-color:#4D4D4D;
    padding:10px;
    color:#fff;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -moz-transition-duration: .8s;
    -o-transition-duration: .8s;
    -webkit-transition-duration: .8s;
    transition-duration: .8s;
  opacity: 3;
    border:2px solid #3D3D3D}

#pun-navlinks ul {
list-style: none;
text-align: center;
width: 980px;
margin: auto;
}

Até mais!