Search code examples
cssbuttonbootstrap-4

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

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);
}