WDroP efeito no botao

+16
Vong
Livєя
Partition
SecurityPixel
Kilєя
ϟFisher
Herasmy
Nosty
nadi0s
Example
Delio Design ®
Rafael
Leonardo
Junior
Kaique Alves
WictorP
20 participantes

WictorP WictorP  • 05.09.13 21:48

WDroP efeito no botao Empty WDroP efeito no botao 05.09.13 21:48

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


Demo [Tens de ter uma conta e sessão iniciada para poderes visualizar 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 07.10.14 19:35, editado 1 vez(es)

avatar Kaique Alves  • 05.09.13 21:54

WDroP efeito no botao Empty Re: WDroP efeito no botao 05.09.13 21:54

massa...

Junior Junior  • 05.09.13 22:02

DesenvolvedorMembro técnico

WDroP efeito no botao Empty Re: WDroP efeito no botao 05.09.13 22:02

Vou utilizar na minha cms muito grato ^^

Leonardo Leonardo  • 05.09.13 23:22

WDroP efeito no botao Empty Re: WDroP efeito no botao 05.09.13 23:22

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

Rafael Rafael  • 06.09.13 12:35

WDroP efeito no botao Empty Re: WDroP efeito no botao 06.09.13 12:35

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

WictorP WictorP  • 06.09.13 20:36

WDroP efeito no botao Empty Re: WDroP efeito no botao 06.09.13 20:36

[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.

Delio Design ® Delio Design ®  • 07.09.13 16:38

WDroP efeito no botao Empty Re: WDroP efeito no botao 07.09.13 16:38

Tentarei usar em alguns de meus trabalhos.

Example Example  • 07.09.13 16:50

WDroP efeito no botao Empty Re: WDroP efeito no botao 07.09.13 16:50

ALERTA - MODERAÇÃO

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



nadi0s nadi0s  • 07.09.13 16:56

WDroP efeito no botao Empty Re: WDroP efeito no botao 07.09.13 16:56

Ótimo, irei utilizar no header de minha CMS.

Nosty Nosty  • 08.09.13 14:26

WDroP efeito no botao Empty Re: WDroP efeito no botao 08.09.13 14:26

muito obrigado por compartilhar! estarei usando :)

Herasmy Herasmy  • 11.09.13 14:41

WDroP efeito no botao Empty Re: WDroP efeito no botao 11.09.13 14:41

Muito bom :D
Vou usar em algumas páginas!

ϟFisher ϟFisher  • 16.09.13 12:14

WDroP efeito no botao Empty Re: WDroP efeito no botao 16.09.13 12:14

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



#Comentei só pro download
uahe

Kilєя Kilєя  • 16.09.13 12:34

WDroP efeito no botao Empty Re: WDroP efeito no botao 16.09.13 12:34

Muito bom,acho que usarei em uns projeto.

SecurityPixel SecurityPixel  • 17.09.13 19:51

WDroP efeito no botao Empty Re: WDroP efeito no botao 17.09.13 19:51

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?

Partition Partition  • 28.09.14 10:52

WDroP efeito no botao Empty Re: WDroP efeito no botao 28.09.14 10:52

ótimo tutorial

Livєя Livєя  • 28.09.14 13:07

WDroP efeito no botao Empty Re: WDroP efeito no botao 28.09.14 13:07

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

Vong Vong  • 28.09.14 14:18

WDroP efeito no botao Empty Re: WDroP efeito no botao 28.09.14 14:18

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

wanderley10 wanderley10  • 28.09.14 16:03

WDroP efeito no botao Empty Re: WDroP efeito no botao 28.09.14 16:03

Massa irmão  ;) , estarei usando para 1 novo layout

Cℓąนร™ Cℓąนร™  • 28.09.14 20:46

WDroP efeito no botao Empty Re: WDroP efeito no botao 28.09.14 20:46

Obrigado por compartilhar estarei utilizando.



Atenciosamente,

iNew iNew  • 03.10.14 19:39

WDroP efeito no botao Empty Re: WDroP efeito no botao 03.10.14 19:39

comentando

TheuDeXter TheuDeXter  • 07.10.14 19:01

WDroP efeito no botao Empty Re: WDroP efeito no botao 07.10.14 19:01

Cometando para Vê ..

WictorP WictorP  • 07.10.14 19:39

WDroP efeito no botao Empty Re: WDroP efeito no botao 07.10.14 19:39

SecurityPixel mesmo como imagem há como, ADC no face.

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.