Fiz um botão usando ID's e mesmo assim quando clicado ele da um margin-top=10px
em ambos. Qual meu erro? Quero que ele faça efeito somente no botão que foi clicado!
button{
border: none;
background-color: lemonchiffon;
border-radius: 50%;
padding: 10px;
margin-right: 10px;
box-shadow: 0px 8px #666;
cursor: pointer;
}
#azul:active{
background-color: skyblue;
cursor: pointer;
box-shadow: 0px 5px dimgray;
margin-top: 10px;
}
#red:active{
background-color: tomato;
cursor: pointer;
box-shadow: 0px 5px dimgray;
margin-top: 10px;
}
<div class="bot">
<h2>Avalie nosso site</h2>
<button onclick="positivo()" id="azul">
<span class="fa fa-thumbs-o-up fa-3x" style="color: navy;"></span>
</button>
<button onclick="negativo()" id="red">
<span class="fa fa-thumbs-o-down fa-3x" style="color: red;"></span>
</button>
margin-top=20px
deve estar em outro lugar, porque nesses seletores que você colocou na pergunta nenhum coloca 20px.