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