Power Pixel Fórum - O melhor conteúdo você encontra aqui!
Redes Sociais:

Você não está conectado. Conecte-se ou registre-se

WDroP efeito no botao

Mensagem - Página 1 de 3

1 WDroP efeito no botao em Qui 5 Set 2013 - 21:48

Membro Elite

Bom galera eu vi esse efeito em um site ai e resolvi fazer igual.


Demo [Você precisa estar registrado e conectado para ver este link.]


Colocando em sua página
Comente para ver o tutorial
Vá no seu arquivo HTML e cole o seguinte código entre as tags <head> </head>


Código:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script>
 $(document).ready(function() {
 $("#verde") .click(function() {
    $('#botao').removeClass('vermelho');
    $('#botao').removeClass('rosa');
 $('#botao').removeClass('azul');
 $('#botao').removeClass('dark');
 $('#botao').removeClass('verdeescuro');
 $('#botao').removeClass('amarelo');
 $('#botao').removeClass('laranja');
 $('#botao').addClass('verde');
 });
 });
 
$(document).ready(function() {
 $("#vermelho") .click(function() {
    $('#botao').removeClass('verde');
    $('#botao').removeClass('rosa');
 $('#botao').removeClass('azul');
 $('#botao').removeClass('dark');
 $('#botao').removeClass('verdeescuro');
 $('#botao').removeClass('amarelo');
 $('#botao').removeClass('laranja');
    $('#botao').addClass('vermelho');
 });
 });
 $(document).ready(function() {
 $("#rosa") .click(function() {
    $('#botao').removeClass('verde');
    $('#botao').removeClass('vermelho');
 $('#botao').removeClass('azul');
 $('#botao').removeClass('dark');
 $('#botao').removeClass('verdeescuro');
 $('#botao').removeClass('amarelo');
 $('#botao').removeClass('laranja');
    $('#botao').addClass('rosa');
 });
 });
 
$(document).ready(function() {
 $("#azul") .click(function() {
    $('#botao').removeClass('rosa');
    $('#botao').removeClass('vermelho');
    $('#botao').removeClass('verde');
 $('#botao').removeClass('dark');
 $('#botao').removeClass('verdeescuro');
 $('#botao').removeClass('amarelo');
 $('#botao').removeClass('laranja');
    $('#botao').addClass('azul');
 });
 });
 $(document).ready(function() {
 $("#dark") .click(function() {
    $('#botao').removeClass('rosa');
    $('#botao').removeClass('vermelho');
    $('#botao').removeClass('verde');
 $('#botao').removeClass('azul');
 $('#botao').removeClass('verdeescuro');
 $('#botao').removeClass('amarelo');
 $('#botao').removeClass('laranja');
    $('#botao').addClass('dark');
 });
 });
 
$(document).ready(function() {
 $("#verdeescuro") .click(function() {
    $('#botao').removeClass('rosa');
    $('#botao').removeClass('vermelho');
    $('#botao').removeClass('verde');
 $('#botao').removeClass('dark');
 $('#botao').removeClass('azul');
 $('#botao').removeClass('amarelo');
 $('#botao').removeClass('laranja');
    $('#botao').addClass('verdeescuro');
 });
 });
 
$(document).ready(function() {
 $("#amarelo") .click(function() {
    $('#botao').removeClass('rosa');
    $('#botao').removeClass('vermelho');
    $('#botao').removeClass('verde');
 $('#botao').removeClass('dark');
 $('#botao').removeClass('azul');
 $('#botao').removeClass('verdeescuro');
 $('#botao').removeClass('laranja');
    $('#botao').addClass('amarelo');
 });
 });
 
$(document).ready(function() {
 $("#laranja") .click(function() {
    $('#botao').removeClass('rosa');
    $('#botao').removeClass('vermelho');
    $('#botao').removeClass('verde');
 $('#botao').removeClass('dark');
 $('#botao').removeClass('azul');
 $('#botao').removeClass('verdeescuro');
 $('#botao').removeClass('amarelo');
    $('#botao').addClass('laranja');
 });
 });
 </script>


Depois também entre as tags <head> </head> cole o código abaixo.


Código:
#hover {
text-align: center;
position: absolute;
top: 35;
left: 50%;
width: 176;
margin-left: -88;
 }
 #hover a {
 float:left;
 }
 #hover #minis {
 border-radius: 7;margin-left:2px;width:20px;height:20px;
 }
 a {
 text-decoration:none;
 color:#000;
 }
 #botao {
width: 176;
height: 28px;
text-align: center;
line-height: 22px;
border-radius: 4;
font: 14 Mangal;
font-weight: bold;
position: absolute;
top: 61;
left: 50%;
margin-left: -87;
 }
 .vermelho {
 background-color:#ff0000;
 transition:background 1.0s;
 }
 .vermelho:hover {
 background-color:#860000;
 }
 
.verde {
 background-color:#00ff47;
 transition:background 1.0s;
 }
 .verde:hover {
 background-color:#009128;
 }
 .rosa {
 background-color:#FF00F5;
 transition:background 1.0s;
 }
 .rosa:hover {
 background-color:#74006F;
 }
 .azul {
 background-color:#001FFF;
 transition:background 1.0s;
 }
 .azul:hover{
 background-color:#001188;
 }
 .dark {
 background-color:#00EBFF;
 transition:background 1.0s;
 }
 .dark:hover{
 background-color:#00828D;
 }
 .verdeescuro {
 background-color:#0B5800;
 transition:background 1.0s;
 }
 .verdeescuro:hover {
 background-color:#062E00;
 }
 .amarelo {
 background-color:#F5FF00;
 transition:background 1.0s;
 }
 .amarelo:hover {
 background-color:#696D00;
 }
 .laranja {
 background-color:#FF8F00;
 transition:background 1.0s;
 }
 .laranja:hover{
 background-color:#925200;
 }
 p {
 padding-bottom: 5;
color: rgba(255, 255, 255, 0.38);
text-align: center;
font: 14 Mangal;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(92, 92, 92, 0.53);
}


Depois cole o código abaixo aonde quer que apareça as opções de cores.


Código:
<div id="hover">
<a href="#" id="verde"><div id="minis" class="verde"></div></a>
<a href="#" id="vermelho"><div id="minis" class="vermelho"></div></a>
<a href="#" id="rosa"><div id="minis" class="rosa"></div></a>
<a href="#" id="azul"><div id="minis" class="azul"></div></a>
<a href="#" id="dark"><div id="minis" class="dark"></div></a>
<a href="#" id="verdeescuro"><div id="minis" class="verdeescuro"></div></a>
<a href="#" id="amarelo"><div id="minis" class="amarelo"></div></a>
<a href="#" id="laranja"><div id="minis" class="laranja"></div></a>
</div>


E depois o código abaixo onde ficará seu botão.


Código:
<a href="#"><div id="botao" class="verde">Registre-se</div></a>

Créditos à Leo pela ideia numa index postada por ele (não sei se index é dele) e para WictorP por criar e codificar o efeito e a página.

Obs: Eu vi um efeito parecido com esse na index do Leo mas não copiei o código, criei ele do 0.



Última edição por WictorP em Ter 7 Out 2014 - 19:35, editado 1 vez(es)

2 Re: WDroP efeito no botao em Qui 5 Set 2013 - 21:54

Membro Bronze

massa...

3 Re: WDroP efeito no botao em Qui 5 Set 2013 - 22:02

Administrador

Vou utilizar na minha cms muito grato ^^

4 Re: WDroP efeito no botao em Qui 5 Set 2013 - 23:22

Membro Prata

Sim, a index foi totalmente criado por min.
- Muitos ficarão grato, obrigado por compartilhar!

5 Re: WDroP efeito no botao em Sex 6 Set 2013 - 12:35

Membro Diamante

Muito bom botão mais poderia ser por imagens tipo bg.

6 Re: WDroP efeito no botao em Sex 6 Set 2013 - 20:36

Membro Elite

[b]Caso queira mudar BG basta mudar os CSS das cores.

Exemplo:

Código:
de
.vermelho {
background-color:#Ff0000;
}
para
.vermelho {
background-image:url(LINKDAIMAGEM);
}
É aconselhado usar quem entende ao menos CSS.

7 Re: WDroP efeito no botao em Sab 7 Set 2013 - 16:38

Tentarei usar em alguns de meus trabalhos.

8 Re: WDroP efeito no botao em Sab 7 Set 2013 - 16:50

Membro Elite

ALERTA - MODERAÇÃO

O usuário BRGames receberá 1 infração por postagem fora do contexto.



9 Re: WDroP efeito no botao em Sab 7 Set 2013 - 16:56

Administrador

Ótimo, irei utilizar no header de minha CMS.

10 Re: WDroP efeito no botao em Dom 8 Set 2013 - 14:26

Membro Bronze

muito obrigado por compartilhar! estarei usando Smile

Mensagem - Página 1 de 3

Ir à página : 1, 2, 3  Seguinte

Tópicos similares

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