ボタン
CSS

Double Layer Button

二重レイヤーがずれてホバーで揃うボタン。

HTML
<div class="dl-wrap">
  <div class="dl-shadow"></div>
  <button class="dl-btn">Submit</button>
</div>
CSS
.dl-wrap {
  position: relative;
  display: inline-block;
}
.dl-shadow {
  position: absolute;
  inset: 4px -4px -4px 4px;
  background: #e5e5e5;
  border-radius: 8px;
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.dl-btn {
  position: relative;
  padding: 12px 32px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.dl-wrap:hover .dl-shadow {
  inset: 0;
}
.dl-wrap:hover .dl-btn {
  transform: translate(2px, 2px);
}