<div class="wrapper">
  <button class="accelerated box"></button>
  <button class="janky box"></button>
</div>
.box {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 4px;
  outline-offset: 4px;
}

.box:first-of-type {
  margin-right: 16px;
}

.wrapper {
  display: flex;
}

.accelerated.box {
  transition: transform 750ms;
  will-change: transform;
  background-color: slateblue;
}
.accelerated.box:hover,
.accelerated.box:focus {
  transform: translateY(10px);
}

.janky.box {
  transition: margin-top 750ms;
  will-change: margin-top;
  background-color: deeppink;
}
.janky.box:hover,
.janky.box:focus {
  margin-top: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.