Button Minimum Width

A common mistake is to assume that a button's width should be equal to its content plus horizontal padding. This may work as expected for a single-language site (e.g. English), but can easily cause unexpected problems for multi-language sites.

Please see the following example:

English:

Chinese:

Arabic:

As you can see, in English and Chinese, The width of the button works well because its content is long enough. But in Arabic, the width of the button is very narrow, which is not user-friendly, because for a main button, its performance should be intuitive enough for users to operate. To avoid this, we can set the minimum width of the button in advance.

button {
  min-width: 90px;
}

English:

Chinese:

Arabic: