矢印が右に移動

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

.m-btn {
    display: inline-block;
    position: relative;
    padding-block: 2rem;
    padding-inline: 5rem;
    background-color: #dc2f3c;
    color: #fff;
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* フォント */
}
.m-btn::after {
    --arrow-size: 1.3rem;
    --arrow-border-width: 0.3rem;
    content: "";
    position: absolute;
    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;
    transition: translate 0.3s ease;
}
@media (any-hover: hover) {
  .m-btn:hover::after {
    translate: 0.5rem -50%;
  }
}