I made a button using ID's and even so when clicked it gives a margin-top=10px
in both. What is my mistake? I want it to only effect the button that was clicked!
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>