Change DIV gradient background with Hover on buttons

Asked

Viewed 388 times

1

I am studying HTML5 and CSS3 through an EAD course. I made a screen with social networking buttons with effect by hovering over (just training). The button goes up and below appears the name of the social network I used with ::before. inserir a descrição da imagem aqui

In the background there is a DIV with background-image: linear-gradient. I would like to know how to change the bottom of that gradient in the hover button? Example, on the Reddit button, the gray part of the gradient is replaced by the orange part of the logo and returns to gray when removing the mouse.

My 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>

My CSS from DIV:

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

My CSS of buttons:

.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;
}

How to change the gradient background of DIV along?

My example can be seen in: http://leandrodr.5gbfree.com/ava/untitled.html

html5 css3 div hover

3 answers

0

One of the ways to do this is by script, can use for example a jquery to assist in this, it is simple and easy for those who are starting in studies, your code would look like this:

<!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>

I recommend studying this lib too, it helps a lot in your studies.

https://jquery.com/

  • Thanks Assis for the tip. Jquery is on the course grid, but it’s a bit distant. As I saw that you can do cool things only with CSS, I thought I could do it.

  • Assisi, I tried to reproduce your example and it didn’t work here. To work the css and script need to be within the HTML code or can you sort, like a . html, a . css and a . js? Can you help me?

0

Dude, only with CSS I think you won’t be able to because in CSS you can only access child or sibling elements, and not superior elements in the DOM hierarchy.

But with pure Javascript, no jQuery, you can change the div#fundo taking the color of the button where you passed the mouse applying it in the background of the div. See:

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>

  • Thanks Sam for the tip. Jquery and Javascript are on the course grid, but it’s a bit distant. As I saw that you can do cool things only with CSS, I thought I could do it.

0


An alternative way without using Javascript is by changing the structure of HTML, placing each button inside a span, each with a class specific to the type of button and inserting the div#fundo at the end of nav.

This way, using the selector ~ (brother element) you will be able to change the background from div because now she is a sister of spans. Just add in CSS rules :hover about the spans.

For example, the Facebook button:

In HTML:

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

And in the CSS:

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

The code will look like this:

* {
   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>

Important: to nav.menu may not have position: relative, for the div#fundo should be positioned in relation to the body.

  • Thanks Sam! I tested it here and it worked. I honestly hadn’t thought about using z-index. Thanks anyway.

Browser other questions tagged html5 css3 div hover

You are not signed in. Login or sign up in order to post.