Botões que alteram as características do CSS
Autor: Alan Felipe | Publicado: 2016-09-13T16:46:00-03:00



&nbsp; Oi, como vocês estão? Espero que estejam bem. Já faz um tempo que este tutorial está na blogsfera, mas parece que foi esquecido. É um simples código que junta CSS e Script para alterar coisas do CSS, já foi muito utilizado como gadget para alterar o background do blog, mas possui infinitas outras funcionalidades. Exemplo do gadget:

#backgrounds a img{
width:50px;
height:50px;
display:inline;
margin: 0px 10px 10px 10px;
padding: 3px;
background: white;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
}

#backgrounds a:hover img{
background: rgba(255,255,255,0.7);
opacity: 1;
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}









$(document).ready(function(){
 $("#background01").click(function(){
  

$("body").css({"background":"url(http://i.imgur.com/cCw0BiU.png)"});
 });
});
$(document).ready(function(){
 $("#background02").click(function(){
  

$("body").css({"background":"url(http://i.imgur.com/vXSdFsv.png)"});
 });
});
$(document).ready(function(){
 $("#background03").click(function(){
  

$("body").css({"background":"url(http://i.imgur.com/68KEonC.png)"});
 });
});















Vamos ver como utilizar este tutorial para melhorar o seu blog?


O código
1. O código é um pouco comprido, mas simples de ser entendido. Cada parte estará de uma cor, e caso uma for alterada, todas deverão.


&lt;style&gt;
#changer img {
-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
#changer a {
width:50px;
height:50px;
margin: 10px;
padding: 3px;
background: white;
display:inline-block;
-webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
transform: scale(1, 1); -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1);
}
#changer a:hover {
background: rgba(255,255,255,0.8);
opacity: 1;
transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2);
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s;
}
&lt;/style&gt;
&lt;div id="changer"&gt;
&lt;script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){
&nbsp;$("#changer01").click(function(){

$("body").css({
"background":"url(LINK1)"
});
&nbsp;});
});


$(document).ready(function(){
&nbsp;$("#changer02").click(function(){

$("body").css({
"background":"url(LINK2)"
});
&nbsp;});
});


$(document).ready(function(){
&nbsp;$("#changer03").click(function(){

$("body").css({
"background":"url(LINK3)"
});
&nbsp;});
});
&lt;/script&gt;
&lt;center&gt;
&lt;a href="javascript:void(O)" id="changer01"&gt;
&lt;img src="LINK1" width="50px"/&gt;&lt;/a&gt;
&lt;a href="javascript:void(O)" id="changer02"&gt;
&lt;img src="LINK2" width="50px"/&gt;&lt;/a&gt;
&lt;a href="javascript:void(O)" id="changer03"&gt;
&lt;img src="LINK3" width="50px"/&gt;&lt;/a&gt;
&lt;/center&gt;
&lt;/div&gt;


Para melhor entendimento
No exemplo de código acima, é mostrado como alterar o background do seu blog, mas você pode fazer muito mais que isso! Preste atenção nas próximas imagens:





Atenção! Cuidado com o que deve estar entre aspas. Para mais códigos sofrerem alteração, copie a parte destacada na última imagem, fazendo as devidas alterações.

Qualquer dúvida, entre em contato pelos comentários! Tchau :3

Créditos pelo código inicial: x