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 2 de 3

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

Membro Elite

Relembrando a primeira mensagem :

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)


11 Re: WDroP efeito no botao em Qua 11 Set 2013 - 14:41

Membro Bronze

Muito bom Very Happy
Vou usar em algumas páginas!

12 Re: WDroP efeito no botao em Seg 16 Set 2013 - 12:14

Membro Ouro

É um bom efeito, vou usar na minha CMS.
Obrigado por compartilhar.



#Comentei só pro download
uahe

13 Re: WDroP efeito no botao em Seg 16 Set 2013 - 12:34

Membro Diamante

Muito bom,acho que usarei em uns projeto.

14 Re: WDroP efeito no botao em Ter 17 Set 2013 - 19:51

Membro Diamante

No caso, teria como colocar tipo um negócio deste no site e ao clicar muda todas div, background e o logo na cor do botão? Mas então no caso o logo não seria uma imagem, mas sim um texto, teria como WictorP?

15 Re: WDroP efeito no botao em Dom 28 Set 2014 - 10:52

Membro

ótimo tutorial

16 Re: WDroP efeito no botao em Dom 28 Set 2014 - 13:07

Membro Platina

Ótimo efeito, estarei usando para algum projeto.
Obrigado por compartilhar, 
até.

17 Re: WDroP efeito no botao em Dom 28 Set 2014 - 14:18

Membro Platina

Ótimo efeito.
Enfim, obrigado por compartilhar.
Até

18 Re: WDroP efeito no botao em Dom 28 Set 2014 - 16:03

Massa irmão  Wink , estarei usando para 1 novo layout

19 Re: WDroP efeito no botao em Dom 28 Set 2014 - 20:46

Membro Bronze

Obrigado por compartilhar estarei utilizando.



Atenciosamente,

20 Re: WDroP efeito no botao em Sex 3 Out 2014 - 19:39

Membro

comentando

Mensagem - Página 2 de 3

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

Tópicos similares

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