Масштабирование текста внутри кнопки HTML

Всем доброго времени суток. И очередной "глупый" вопрос от меня: как задать масштабирование текста внутри кнопки? Есть у меня такая вот css-структура:

button {
  outline: none;
  border: 1px solid black;
  cursor: pointer;
  transition: 0,2s;
  text-align: center;
  font-weight: bolder;
  font-style: oblique;
  text-transform: uppercase;
  margin-bottom: 5px;
  margin-top: 5px;
  width: 100%;
  height: 100%;
  background: lime;
  color: white;
  -webkit-text-stroke-color: black;
  -webkit-text-stroke-width: 1px;
  font-size: 100%;
  border-radius: 1rem;
}

Как из нее видно, размер текст по идее должен занимать 100% доступного пространства кнопки, однако на деле, при попытке масштабировать изображение, получается такая вот фигня:

Буду признателен за возможные пути решения данной проблемы и обьяснение почему так вообще происходит?

На сайте нашел похожий вопрос: Размер текста внутри кнопки

Однако ответ, который там дали, не решает проблему, так как нужно, чтобы масштабирование происходило относительно размера кнопки, а не экрана.