![]Tutorial]Botões de Confirmação estilo Facebook Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas ![]Tutorial]Botões de Confirmação estilo Facebook Facebook](https://2img.net/h/cdn2.iconfinder.com/data/icons/aquaticus/60%20X%2060/facebook.png){kind=icon} | Botões de Confirmação Estilo Facebook |
Neste Tutorial Inédito e Exclusivo,Iremos aprender como deixar os botões do Fórum ao Estilo do Facebook,Com Apenas códigos CSS
Prévia do Próximo Tutorial !: Nenhuma Informação no Momento... ( Preciso de Sugestões )
Destaque para : Aparência Agradável e Estilosa,Efeitos ao Clicar e ao Passar o Mouse,Estilo Facebook
Versões : PUNBB,PHPBB3,PHPBB2
--> Código CSS <--
Adicione o Código Abaixo em
Painel de controle ->> Visualização ->> Imagens e Cores ->> Cores ->> Folha de estilo CSS ->>
Adicione este código No seu CSS
Código PUNBB, PHPBB3 e PHPBB2
- Código:
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {background-image: url(http://static.ak.fbcdn.net/rsrc.php/v2/yY/x/LgxljCfyvyQ.png);
background: #DDD;
border-bottom-color: #999;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}
input[type="button"], input[type="reset"], input[type="submit"] {
padding: 3px 9px 3px 9px;
background-image: url(http://static.ak.fbcdn.net/rsrc.php/v2/yY/x/LgxljCfyvyQ.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -352px -54px;
background-color: #EEE;
border: 1px solid #999;
border-bottom-color: #888;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
color:#333;
cursor:pointer;
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
font-weight: bold;}
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {background-image: url(http://static.ak.fbcdn.net/rsrc.php/v2/yY/x/LgxljCfyvyQ.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -352px -103px;
background-color: #5B74A8;
border-color: #29447E #29447E #1A356E;
color:white !important;
font-weight:bold;
cursor: pointer;
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
}
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
background-position: -352px -09px;
}
Resultado
Veja o Resultado Aqui : LINK
Quer Mais Tutoriais Inéditos e Exclusivos ??, Se Tiver uma Ideia , Me Envie por MP e Se for Possível Fazer,eu Postarei um Tutorial !
CRIADO POR LUCASRPG - SPDESIGN
