Как я могу анимировать кнопку, не перемещая текст внутри?

У меня есть кнопка, к которой я применил постоянную вращающуюся анимацию.

@keyframes rotateinf {
  from { transform: rotate(  0deg); }
   to  { transform: rotate(360deg); }
}

Проблема в том, что к дочернему тексту тоже применяется анимация.

Мне удалось найти дешевое решение этой проблемы: я создал элемент и установил абсолютную позицию, поместив его прямо поверх кнопки с атрибутами top и right. Класс imptxt просто устанавливает шрифт.

<span class = "imptxt" style = "position: absolute;z-index: 10; color: black; top:40%; right:44%; pointer-events: none;"
  >
  All about
</span>
<span class = "imptxt" style = "position: absolute;z-index: 10; color: black; top:48%; right:48%; pointer-events: none;"
  >
  me
</span>
<button id = "trns" class = "buttonrot" onmousedown = "redirect()"></button>

Класс buttonrot следующий:

padding: 200px ;
  border-radius: 50px;
  z-index: 9;
  animation:fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;

Вот результат (.gif):

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

Фрагмент кода:

.buttonrot {
  padding: 200px;
  border-radius: 50px;
  z-index: 9;
  animation: fadeintop 1s ease-in-out, rotateinf 10s linear infinite 1s;
  position: relative;
  display: inline-block;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center;
}

@keyframes rotateinf {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<span class = "imptxt" style = " position: absolute;z-index: 10; color: black; top:40%; right:44%; pointer-events: none;">All about</span>
<span class = "imptxt" style = "position: absolute;z-index: 10; color: black; top:48%; right:48%; pointer-events: none;">me</span>
<button id = "trns" class = "buttonrot" onmousedown = "redirect()"></button>