背景グラデーションがスライド

<a href="#" class="m-btn">テキストテキスト</a>

.m-btn {
  display: inline-block;
  color: #fff;
  padding-block: 2rem;
  padding-inline: 5rem;
  overflow: hidden;
  position: relative;
}
@media (any-hover: hover) {
  .m-btn:hover::before {
    translate: -50%;
  }
}

.m-btn::before,
.m-btn::after {
  content: "";
  position: absolute;
}
.m-btn::before {
  --color-01: #37A9F3;
  --color-02: #1357AE;

  z-index: -1;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: linear-gradient(135deg, var(--color-01) 0, var(--color-02) 50%, var(--color-02) 50%, var(--color-01) 100%);
  background-repeat: no-repeat;
  transform-origin: left center;
  transition: translate 0.3s ease;
}
.m-btn::after {
  --arrow-size: 1.3rem;
  --arrow-border-width: 0.3rem;

  top: 50%;
  right: 2rem;
  translate: 0 -50%;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-top: var(--arrow-border-width) solid currentColor;
  border-right: var(--arrow-border-width) solid currentColor;
  rotate: 45deg;
}