Efeito de botão pressionado no fórum

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Efeito de botão pressionado no fórum

Mensagem por freiz em 05/05/11, 02:25 pm

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
avatar

freiz
Nível 8

Masculino
Inscrito dia : 29/10/2010
Mensagens : 126
Pontos Ativos : 191

Ver perfil do usuário http://iphoneinsides.forumeiros.com

Resolvido Re: Efeito de botão pressionado no fórum

Mensagem por under em 05/05/11, 02:59 pm

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

under
Usuário avançado

Masculino
Inscrito dia : 01/06/2010
Mensagens : 407
Pontos Ativos : 714

Ver perfil do usuário http://noix.forumclan.com/

Resolvido Re: Efeito de botão pressionado no fórum

Mensagem por seender em 06/05/11, 10:06 am

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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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!
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum