Bootstrap 4: how to animate button changing margin-top without moving rows below?

Issue

I have two rows, one with a button and one with text, I want to add a simple animation on the button by changing it's margin-top, problem is that all the rows below will move with the button. I tried with position-absolute on button and position-relative on col, but then bootstrap columns don't wrap in responsive.

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>

Solution

To adjust the appearance of an element without adjusting how it affects the rest of the page, use the transform property. In this case you want to move in the y-direction so use translateY():

button:active {
  transform: translateY(4px);
}

Answered By - Ross Allen