I'm facing an issue with adding a simple animation to a button in one row of my webpage. When I change the margin-top of the button, all the rows below it also move along with the button. I tried using position-absolute on the button and position-relative on the column, but then the bootstrap columns do not wrap properly in responsive mode.
button:active {
margin-top: 4px;
}
<div class="row">
<div class="col">
<button>
<p>Button</p>
</button>
</div>
<div class="row">
<div class="col">
<button>
<p>Text.</p>
</button>
</div>