Efeito de botão pressionado no fórum

[freiz]

Qual é sua questão:
Olá, eu ví em um exemplo de tema a possibilidade de colocar menus que quando clicados, eles fazem um efeito de aperto, ou como se estivesse sendo pressionados.

Gostaria de fazer algo similar em meu fórum.

Já procurei aqui na ajuda sobre efeitos em botões e tudo mais, mas não encontrei como fazer isso.

Infelizmente não lembro o link do fórum, eu ví isso a alguns dias, mas não decorei o nome do fórum.
Entretanto, também achei um tema onde ao passar o cursor do mouse em cima, ele destaca o menu, achei interessante também.

Gostaria de saber fazer ou um ou outro se puder.

Podem ajudar por favor?

Grato a todos.

Que medidas você tomou para corrigir o problema:
Procurei na ajuda, mas não encontrei soluções para o que procuro.

Apresente-nos imagens do problema (se necessário):
Efeito do menu como no fórum abaixo...

http://iphoneinsides.forumeiros.com/admin/index.forum?extended_admin=1&page=hitskin&part=themes&start=6&sub=styles&tid=e1434427b39e794923c73c9fa62f399a

[under]

e so cria um botao com animação!!

[seender]

Olá!

Neste fórum é utilizado o seguinte código:

Código:


ul.linklist a img {
filter:alpha(opacity=20);
-moz-opacity: 0.2;
opacity: 0.2;
}
ul.linklist a img:hover {
filter:alpha(opacity=70);
-moz-opacity: 0.7;
opacity: 0.7;
}



#i_icon_mini_index {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/indice10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_index:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/indice10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_portal {
background-image: url('http://2img.net/i/fa/macinscott/icon_mini_portal_en.gif');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_portal:hover {
background-image: url('http://2img.net/i/fa/macinscott/icon_mini_portal_en.gif');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_faq {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/faq10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_faq:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/faq10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_search {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/procur10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_search:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/procur10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}


#i_icon_mini_members {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/membro10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_members:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/membro10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}


#i_icon_mini_groups {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/grupos10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_groups:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/grupos10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_profile {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/perfil10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_profile:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/perfil10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_message {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/menssa10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_message:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/menssa10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}


#i_icon_mini_logout {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/sair10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_logout:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/sair10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_new_message {
background-image: url('http://2img.net/i/fa/macinscott/icon_mini_new_message_en.gif');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_new_message:hover {
background-image: url('http://2img.net/i/fa/macinscott/icon_mini_new_message_en.gif');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_register {
background-image: url('http://2img.net/i/fa/macinscott/icon_mini_register_en.gif');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_register:hover {
background-image: url('http://2img.net/i/fa/macinscott/icon_mini_register_en.gif');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_login {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/login11.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_login:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/login11.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}



#i_icon_mini_gallery {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/galeri10.png');
background-repeat: np-repeat;
padding: 0.0px 0.0px;
}

#i_icon_mini_gallery:hover {
background-image: url('http://i25.servimg.com/u/f25/16/45/48/02/galeri10.png');
margin-bottom : 3px !important;
background-repeat: np-repeat;
padding: 0.1px 0.1px;
}

É só ir modificando o link da imagem do menu no código.

Até mais!