"Button:active" moves all buttons instead of only clicked button - css

Question

I know that it has something to do with margin's colliding or the layout but I can't figure it exactly out. My goal is to move a clicked (div) button by 5 pixels. The current way I do this is by setting the :active margin-top to 5.
I also can't figure out how to make all buttons take up the whole screen space. Using 100% or 100vh creates too much space.
CSS:
body{
margin: 0;
padding: 0;
font-family: Sans-Serif;
-webkit-animation: bgcolor 20s infinite;
animation: bgcolor 10s infinite;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
header{
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
font-size: 25px;
}
.container{
padding: 10px;
margin: 0 auto;
text-align: center;
}
.question{
font-size: 35px;
margin: 10px;
font-weight: bold;
color: white;
}
.buttons-container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
height: 100%;
}
.button{
padding: 25px;
background-color: green;
color: white;
font-size: 25px;
box-shadow: 0px 5px 0px #504f4f;
}
.button:active{
box-shadow: none;
margin-top: 5px;
}
#keyframes bgcolor {
0% {
background-color: #45a3e5
}
30% {
background-color: #66bf39
}
60% {
background-color: #eb670f
}
90% {
background-color: #f35
}
100% {
background-color: #864cbf
}
}
HTML
<?php
include 'header.php';
?>
<div class="wrapper">
<header>
Quiz
</header>
<div class="container">
<div class="question">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="buttons-container">
<div class="button">
Opt 1
</div>
<div class="button">
Opt 2
</div>
<div class="button">
Opt 3
</div>
<div class="button">
Opt 4
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

A little further explanation from my comment: when you use margins, you are actually going to influence the document flow and that is causing the entire page to reflow and relayout.
If you want to preserve document flow but nudge the button around, you should consider using relative positioning, i.e. position: relative; top: -5px;.
ps: The default is position: static.