transformプロパティで複数指定する場合は、指定の順番に注意が必要です。
デモページはこちら

以下のhtml構造で確認します。

<p>transform指定なし → translate → rotate → scale</p>
<button class="button-parent"><span class="button-child">もっと見る</span></button>
<button class="button-parent"><span class="button-child style01">もっと見る</span></button>
<button class="button-parent"><span class="button-child style02">もっと見る</span></button>
<button class="button-parent"><span class="button-child style03">もっと見る</span></button>

<p>transform指定なし → translate → scale → rotate</p>
<button class="button-parent"><span class="button-child">もっと見る</span></button>
<button class="button-parent"><span class="button-child style01">もっと見る</span></button>
<button class="button-parent"><span class="button-child style04">もっと見る</span></button>
<button class="button-parent"><span class="button-child style05">もっと見る</span></button>

CSSでボタンの矢印を再現します。疑似要素のborder-topとborder-rightをtransformで移動・回転・縮小します。変化がわかりやすいように1つずつ順番に指定していきます。

.button-parent {
  font-size: 1.8rem;
  color: #fff;
  display: block;
  width: 100%;
  max-width: 200px;
  margin: 0 auto 1em;
  padding: 10px 20px;
  background: #62aac8;
  text-align: center;
  border: unset;
  appearance: none;
  cursor: pointer;
}

.button-child {
  position: relative;
  padding-right: 20px;
}

.button-child::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

.style01::before {
  transform: translateY(-50%);
}

.style02::before {
  transform: translateY(-50%) rotate(45deg);
}

.style03::before {
  transform: translateY(-50%) rotate(45deg) scaleY(0.6);
}

.style04::before {
  transform: translateY(-50%) scaleY(0.6);
}

.style05::before {
  transform: translateY(-50%) scaleY(0.6) rotate(45deg);
}

transformプロパティをtranslate → rotate → scaleの順番に指定していくと矢印が崩れるのがわかります。translate → scale → rotateの順番に指定すると意図した矢印になります。