Possuo duas divs, a 'botao' e dentro dela a 'saibaMais' com o texto, apliquei scale e transition na div 'botao' utilizando o hover, mas preciso que a div 'saibaMais' mude a cor para branco ao mesmo tempo em que o hover for acionado na 'botao' , porém isso não está acontecendo, como resolver?
Só coloquei o texto em uma div porque não estava conseguindo posicionar corretamente e usar o padding fazia com que o tamanho da div fosse alterado, existe uma forma mais eficaz que usar div para o texto?
<a href="#">
<div class="botao">
<div class="saibaMais">Saiba mais</div>
</div>
</a>
.botao{
width:100px;
height: 40px;
border: solid 1px #f1c40f;
background-color: #fff;
position: absolute;
top:40%;
right:40%;
margin-top: -30px;
margin-right:-50px;
border-radius:6px;
box-sizing: border-box;
}
.botao:hover{
width:100px;
height: 40px;
background-color: #f39c12;
color: #fff;
border-radius:6px;
box-sizing: border-box;
transform: scale(1.2);
transition:0.3s;
}
.saibaMais{
color: #000;
position: absolute;
top:16%;
right:12%;
font-size: 1.1em;
font-family: 'Oswald', sans-serif;
font-weight: 400;
}