如何确保按钮Hover后图标始终居中？解决偏移适配问题

我有一个由图标和文本组成的按钮。当鼠标悬停在按钮上时，文本向右移动，图标也随之右移，形成流畅的动画效果。

当前我通过以下代码实现该过渡效果：

.button:not(.disabled):hover .icon {
  transform: translate3d(150%, 0, 0);
}

其中150%是一个随意设定的值，若修改App.js中图标宽度（第10行），图标将不再居中。我需要一个解决方案来实现以下目标：

• 未悬停时，图标和文本均保持居中状态；
• 悬停时，最终仅图标保持居中状态。

恳请各位提供指导。

内容的提问来源于stack exchange，提问作者Daniel Ivory