切换文本时保持按钮宽度恒定。（CSS中没有固定宽度）

Question

我有一个具有固定填充且没有固定宽度的按钮组件。这个按钮在很多地方都使用，我希望按钮根据按钮上显示的文本改变宽度。

我现在尝试向按钮添加一个切换微调器，以便当用户单击按钮时文本消失并显示微调器。我遇到的问题是按钮不断调整大小，因为微调器的宽度与文本不同

export const Buttons = styled.button`
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
`

这些是我当前的按钮样式。

Answer 1

如果您不想/可以修复按钮宽度，可以选择一个选项（也许不是最好的，但它会起作用），您可以尝试在显示加载微调器时使按钮文本透明，并将该微调器绝对定位在按钮内部。例如，你可以有这样的东西：

<button>
   <span class="text">Press here</button>
   <span class="spinner"></spinner>
</button>

//CSS
.spinner { 
   //Your CSS styles here
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
   display: none;
 }

当您没有加载任何内容时，您.spinner应该隐藏（例如不显示）；当你想显示它时，只需更改该显示属性即可；并使span.text文本透明。尺寸将始终保持不变，您将获得您想要的效果。

button.loading .text {
   color: transparent;
}

button.loading .spinner {
   display: block;
}

这个解决方法应该有效，也许不是最好的方法，但一种方法：D