Какие возможные варианты сделать такую кнопку, чтобы границы кнопок подстраивались под размер текста внутри?

Можно подсчитать по количеству символов длину кнопки + отступы. По этому размеру отрисовать динамически кнопку и хаполнить штриховкой боковую и нижние строны проекции. Заливку примерно так сделать

.striped-background {
    background: repeating-linear-gradient(
      -45deg,         /* угол наклона */
      white,          /* начало белого цвета */
      white 10px,     /* белая линия 10px */
      black 10px,     /* начало черной */
      black 15px      /* толщина черной 5px */
    );
  }

При этом если будете менять угол наклона, может появиться лесенка. Или сделать штриховку в svg

а может просто повторящийся паттерн на фон да не мудрить?)