Как выровнять кнопку по ширине контента

Чтобы кнопка занимала ширину контента, можно использовать CSS свойство display: inline-block или display: inline-flex. Это заставит кнопку подстраиваться под ширину текста внутри неё.

button {
  display: inline-block;
  padding: 8px 16px;
}

Если нужно, чтобы кнопка была блочной, но сжималась по контенту, можно использовать width: fit-content:

button {
  width: fit-content;
  padding: 8px 16px;
}

Для старых браузеров можно использовать display: table как fallback:

button {
  display: table;
  margin: 0 auto; /* для центрирования */
}