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>
Depois também entre as tags <head> </head> cole o código abaixo.
Depois cole o código abaixo aonde quer que apareça as opções de cores.
E depois o código abaixo onde ficará seu botão.
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.
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)
Kaique Alves • 05.09.13 21:54
Leonardo • 05.09.13 23:22
Delio Design ® • 07.09.13 16:38
Nosty • 08.09.13 14:26
Herasmy • 11.09.13 14:41
Cℓąนร™ • 28.09.14 20:46
iNew • 03.10.14 19:39
