1

Estou estudando HTML5 e CSS3 através de um curso EAD. Fiz uma tela com botões de redes sociais com efeito ao passar o mouse sobre (apenas treinamento). O botão sobe e abaixo aparece o nome da rede social que usei com ::before. inserir a descrição da imagem aqui

No fundo existe uma DIV com background-image: linear-gradient. Eu gostaria de saber como mudar o fundo desse gradiente no hover do botão? Exemplo, sobre o botão do Reddit, a parte cinza do gradiente seja substituída pelo laranja do logo e volte ao cinza ao retirar o mouse.

Meu HTML:

<!DOCTYPE html>
<html>
   <head>
   <link rel="stylesheet" href="untitled.css">
   <script src="https://kit.fontawesome.com/c8cb246294.js"></script>
   </head>
   <body>
      <div id="fundo">
         <nav class="menu">
            <button type="button" class="btn_social btn_facebook"><span class="fab fa-facebook-f"></span></button>
            <button type="button" class="btn_social btn_instagram"><span class="fab fa-instagram"></span></button>
            <button type="button" class="btn_social btn_reddit"><span class="fab fa-reddit-alien"></span></button>
            <button type="button" class="btn_social btn_snapchat"><span class="fab fa-snapchat-ghost"></span></button>
            <button type="button" class="btn_social btn_twitter"><span class="fab fa-twitter"></span></button>
            <button type="button" class="btn_social btn_whatsapp"><span class="fab fa-whatsapp"></span></button>
            <button type="button" class="btn_social btn_youtube"><span class="fab fa-youtube"></span></button>
         </nav>
      </div>
   </body>
</html>

Meu CSS da DIV:

#fundo {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(to bottom, #ffffff, #808080);
}

Meu CSS dos botões:

.btn_social {
   width: 80px;
   height: 80px;
   border: none;
   color: #ffffff;
   background: #aab8c2;
   margin: 10px;
   font-size: 24px;
   border-radius: 10px;
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
   transition: all 0.4s ease;
}

.btn_facebook::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #3c5a99;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_facebook:hover {
   transform: translateY(-20px);
   background: #3c5a99;
   transition: all 0.5s ease;
}

.btn_facebook:hover::before {
   content: "FACEBOOK";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

Como mudar o fundo gradiente da DIV junto?

Meu exemplo pode ser visto em: http://leandrodr.5gbfree.com/ava/untitled.html

3 Respostas 3

0

Uma forma alternativa sem usar JavaScript é alterando a estrutura do HTML, colocando cada botão dentro de um span, cada qual com uma classe específica ao tipo de botão e inserindo a div#fundo no final da nav.

Desta forma, usando o seletor ~ (elemento irmão) você conseguirá alterar o background da div pois agora ela é uma irmã dos spans. Basta adicionar no CSS regras :hover sobre os spans.

Por exemplo, o botão do Facebook:

No HTML:

<span class="spn_facebook">
   <button type="button" class="btn_social btn_facebook"><span class="fab fa-facebook-f"></span></button>
</span>

E no CSS:

.spn_facebook:hover ~ #fundo {
   background-image: linear-gradient(to bottom, #ffffff, #3c5a99);
}

O código ficará desta forma:

* {
   padding: 0;
   margin: 0;
}

body {
   overflow: hidden;
   width: 100vw;
   height: 100vh;
   text-align: center;
}

#fundo {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(to bottom, #ffffff, #808080);
   z-index: -1;
}

.menu {
   margin-top: 100px;
}

.btn_social {
   width: 80px;
   height: 80px;
   border: none;
   color: #ffffff;
   background: #aab8c2;
   margin: 10px;
   font-size: 24px;
   border-radius: 10px;
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
   transition: all 0.4s ease;
}

.btn_facebook::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #3c5a99;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_facebook:hover {
   transform: translateY(-20px);
   background: #3c5a99;
   transition: all 0.5s ease;
}

.btn_facebook:hover::before {
   content: "FACEBOOK";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.spn_facebook:hover ~ #fundo {
   background-image: linear-gradient(to bottom, #ffffff, #3c5a99);
}

.btn_instagram::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #c13584;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_instagram:hover {
   transform: translateY(-20px);
   background: #c13584;
   transition: all 0.5s ease;
}

.btn_instagram:hover::before {
   content: "INSTAGRAM";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.spn_instagram:hover ~ #fundo {
   background-image: linear-gradient(to bottom, #ffffff, #c13584);
}

.btn_twitter::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #1da1f2;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_twitter:hover {
   transform: translateY(-20px);
   background: #1da1f2;
   transition: all 0.5s ease;
}

.btn_twitter:hover::before {
   content: "TWITTER";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.spn_twitter:hover ~ #fundo {
   background-image: linear-gradient(to bottom, #ffffff, #1da1f2);
}

.btn_whatsapp::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #4ac959;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_whatsapp:hover {
   transform: translateY(-20px);
   background: #4ac959;
   transition: all 0.5s ease;
}

.btn_whatsapp:hover::before {
   content: "WHATSAPP";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.spn_whatsapp:hover ~ #fundo {
   background-image: linear-gradient(to bottom, #ffffff, #4ac959);
}

.btn_youtube::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #ff0000;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_youtube:hover {
   transform: translateY(-20px);
   background: #ff0000;
   transition: all 0.5s ease;
}

.btn_youtube:hover::before {
   content: "YOUTUBE";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.spn_youtube:hover ~ #fundo {
   background-image: linear-gradient(to bottom, #ffffff, #ff0000);
}

.btn_snapchat::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #e6e200;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_snapchat:hover {
   transform: translateY(-20px);
   background: #e6e200;
   transition: all 0.5s ease;
}

.btn_snapchat:hover::before {
   content: "SNAPCHAT";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.spn_snapchat:hover ~ #fundo {
   background-image: linear-gradient(to bottom, #ffffff, #e6e200);
}

.btn_reddit::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #ff4500;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_reddit:hover {
   transform: translateY(-20px);
   background: #ff4500;
   transition: all 0.5s ease;
}

.btn_reddit:hover::before {
   content: "REDDIT";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.spn_reddit:hover ~ #fundo {
   background-image: linear-gradient(to bottom, #ffffff, #ff4500);
}
<script src="https://kit.fontawesome.com/c8cb246294.js"></script>

<nav class="menu">
   <span class="spn_facebook">
      <button type="button" class="btn_social btn_facebook"><span class="fab fa-facebook-f"></span></button>
   </span>
   <span class="spn_instagram">
      <button type="button" class="btn_social btn_instagram"><span class="fab fa-instagram"></span></button>
   </span>
   <span class="spn_reddit">
      <button type="button" class="btn_social btn_reddit"><span class="fab fa-reddit-alien"></span></button>
   </span>
   <span class="spn_snapchat">
      <button type="button" class="btn_social btn_snapchat"><span class="fab fa-snapchat-ghost"></span></button>
   </span>
   <span class="spn_twitter">
      <button type="button" class="btn_social btn_twitter"><span class="fab fa-twitter"></span></button>
   </span>
   <span class="spn_whatsapp">
      <button type="button" class="btn_social btn_whatsapp"><span class="fab fa-whatsapp"></span></button>
   </span>
   <span class="spn_youtube">
      <button type="button" class="btn_social btn_youtube"><span class="fab fa-youtube"></span></button>
   </span>
   <div id="fundo"></div>
</nav>

Importante: a nav.menu não poderá ter position: relative, pois a div#fundo deve estar posicionada em relação ao body.

1
  • Obrigado Sam! Testei aqui e funcionou. Sinceramente não tinha pensando em usar z-index. Valeu mesmo. Commented 21/06/2019 às 1:23
0

Um dos modos de fazer isso é por script, pode usar por exemplo um jquery para auxiliar nisso, ele é simples e fácil para quem está iniciando nos estudos, seu código ficaria mais ou menos assim:

<!DOCTYPE html>
<html>

            <head>

               <link rel="stylesheet" href="untitled.css">

               <script src="https://kit.fontawesome.com/c8cb246294.js"></script>

            </head>

            <body>

            <div id="fundo">

               <nav class="menu">

                  <button type="button" class="btn_social btn_facebook"><span class="fab fa-facebook-f"></span></button>
                  <button type="button" class="btn_social btn_instagram"><span class="fab fa-instagram"></span></button>
                  <button type="button" class="btn_social btn_reddit"><span class="fab fa-reddit-alien"></span></button>
                  <button type="button" class="btn_social btn_snapchat"><span class="fab fa-snapchat-ghost"></span></button>
                  <button type="button" class="btn_social btn_twitter"><span class="fab fa-twitter"></span></button>
                  <button type="button" class="btn_social btn_whatsapp"><span class="fab fa-whatsapp"></span></button>
                  <button type="button" class="btn_social btn_youtube"><span class="fab fa-youtube"></span></button>

               </nav>

            </div>

      <!-- Chama o jquery -->
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

      <script>
       // Quando tem um hover
        $(".btn_reddit").hover(function(){

          // Altera o css
          $("#fundo").css('background-image', 'linear-gradient(to bottom, #ffffff, #f84300)')
          console.log('ok')
        }, function(){

          // Ao sair do hover
          $("#fundo").css('background-image','linear-gradient(to bottom, #ffffff, #808080)');
        })
      </script>
            </body>
</html>

Recomendo estudar essa lib também, ajuda bastante nos teus estudos.

https://jquery.com/

2
  • Obrigado Assis pela dica. Jquery está na grade do curso, mas está um pouco distante. Como eu vi que dá pra fazer coisas legais só com o CSS, pensei que daria pra fazer isso. Commented 20/06/2019 às 1:08
  • Assis, tentei reproduzir seu exemplo e não funcionou aqui. Para funcionar o css e o script precisam estar dentro do código HTML ou pode separar, tipo um .html, um .css e um .js? Pode me ajudar? Commented 20/06/2019 às 1:50
0

Cara, só com CSS creio que não irá conseguir porque no CSS você só consegue acessar elementos filhos ou irmãos, e não elementos superiores na hierarquia do DOM.

Mas com JavaScript puro, sem jQuery, você consegue alterar a div#fundo pegando a cor do botão onde passou o mouse a aplicando no background da div. Veja:

document.addEventListener("DOMContentLoaded", function(){
   
   // seleciona todos os botões
   var buts = document.querySelectorAll(".menu .btn_social");
   
   for(let x=0; x<buts.length; x++){
   
      // aplica dois eventos aos botões   
      buts[x].onmouseenter = buts[x].onmouseleave = function(e){
         
         // pega a div #fundo
         var fundo = document.getElementById("fundo");
         // se o evento for mouseenter, aplica a cor do botão no gradient
         // se o evento for mouseleave, aplica a cor cinza padrão
         var cor = e.type == "mouseenter" ? getComputedStyle(this, "::before").getPropertyValue("color") : "#808080";
         fundo.style.backgroundImage = "linear-gradient(to bottom, #ffffff, "+cor+")";
      }
      
   }
});
* {
   padding: 0;
   margin: 0;
}

body {
   overflow: hidden;
   width: 100vw;
   height: 100vh;
   text-align: center;
}

#fundo {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(to bottom, #ffffff, #808080);
}

.menu {
   margin-top: 100px;
}

.btn_social {
   width: 80px;
   height: 80px;
   border: none;
   color: #ffffff;
   background: #aab8c2;
   margin: 10px;
   font-size: 24px;
   border-radius: 10px;
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
   transition: all 0.4s ease;
}

.btn_facebook::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #3c5a99;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_facebook:hover {
   transform: translateY(-20px);
   background: #3c5a99;
   transition: all 0.5s ease;
}

.btn_facebook:hover::before {
   content: "FACEBOOK";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.btn_instagram::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #c13584;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_instagram:hover {
   transform: translateY(-20px);
   background: #c13584;
   transition: all 0.5s ease;
}

.btn_instagram:hover::before {
   content: "INSTAGRAM";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.btn_twitter::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #1da1f2;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_twitter:hover {
   transform: translateY(-20px);
   background: #1da1f2;
   transition: all 0.5s ease;
}

.btn_twitter:hover::before {
   content: "TWITTER";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.btn_whatsapp::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #4ac959;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_whatsapp:hover {
   transform: translateY(-20px);
   background: #4ac959;
   transition: all 0.5s ease;
}

.btn_whatsapp:hover::before {
   content: "WHATSAPP";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.btn_youtube::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #ff0000;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_youtube:hover {
   transform: translateY(-20px);
   background: #ff0000;
   transition: all 0.5s ease;
}

.btn_youtube:hover::before {
   content: "YOUTUBE";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.btn_snapchat::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #e6e200;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_snapchat:hover {
   transform: translateY(-20px);
   background: #e6e200;
   transition: all 0.5s ease;
}

.btn_snapchat:hover::before {
   content: "SNAPCHAT";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}

.btn_reddit::before {
   font-family: arial;
   font-size: 1px;
   font-weight: bold;
   color: #ff4500;
   content: "";
   position: absolute;
   bottom: -18px;
   width: 100%;
   left: 0px;
   transition: all 0.4s ease;
}

.btn_reddit:hover {
   transform: translateY(-20px);
   background: #ff4500;
   transition: all 0.5s ease;
}

.btn_reddit:hover::before {
   content: "REDDIT";
   font-size: 14px;
   transition: all 0.5s ease;
   transition-delay: 0.2s;
}
<script src="https://kit.fontawesome.com/c8cb246294.js"></script>
<div id="fundo">
   <nav class="menu">
      <button type="button" class="btn_social btn_facebook"><span class="fab fa-facebook-f"></span></button>
      <button type="button" class="btn_social btn_instagram"><span class="fab fa-instagram"></span></button>
      <button type="button" class="btn_social btn_reddit"><span class="fab fa-reddit-alien"></span></button>
      <button type="button" class="btn_social btn_snapchat"><span class="fab fa-snapchat-ghost"></span></button>
      <button type="button" class="btn_social btn_twitter"><span class="fab fa-twitter"></span></button>
      <button type="button" class="btn_social btn_whatsapp"><span class="fab fa-whatsapp"></span></button>
      <button type="button" class="btn_social btn_youtube"><span class="fab fa-youtube"></span></button>
   </nav>
</div>

1
  • Obrigado Sam pela dica. Jquery e Javascript estão na grade do curso, mas está um pouco distante. Como eu vi que dá pra fazer coisas legais só com o CSS, pensei que daria pra fazer isso. Commented 20/06/2019 às 1:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .