a.btn-flat {
  position: relative;          /* 疑似要素の基準にする */
  overflow: hidden;            /* はみ出た疑似要素を隠す */
  display: inline-block;
  padding: 0.3rem 5rem;
  color: #474545a6;
  background: #f3ecec;
  border-radius: 0;
  text-decoration: none;
}

a.btn-flat span {
  position: relative;
  z-index: 1;                  /* テキストを上に表示 */
}

.btn-wrapper {
  display: flex;
  justify-content: flex-end;  /* 右寄せ */
}


a.btn-flat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff7f50;
  transform: translateX(-90%);
  transition: transform 0.5s ease-in-out;
  z-index: 0;                  /* 背景としてテキストの下に */
}

a.btn-flat:hover::before {
  transform: translateX(0%);
}