Почему мой <button>не покрывает весь текст внутри него?

Question

По сути, граница кнопки не покрывает весь текст внутри нее. Как мне заставить его покрыть весь текст?

У меня установлен загрузчик и я использую его для некоторых других компонентов. Возможно ли, что начальная загрузка мешает этому или чему-то еще?

Я пробовал заполнение, как предлагают многие сайты, но оно не работает.

<a target="_blank" href="/SignUp">
   <button className="btn-design">Join BridgeBurma Today</button>
</a>

Это CSS

.btn-design{
  background-color: orange;
  color: red;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  border-radius: 20%;
  white-space: nowrap;
}

Answer 1

Каждый показывает вам некоторые CSS-решения, но, на мой взгляд, худшая ошибка с кодом здесь - это вложенный button внутри тега a. Это не имеет смысла, и его следует избегать любой ценой, поскольку они предназначены для совершенно другой, но связанной с этим функциональности. Оба запускают какое-то действие при нажатии, и их объединение может привести к неприятным побочным эффектам.

<a target="_blank" href="/SignUp">
   <span classe="btn-design">Join BridgeBurma Today</span>
</a>

Это будет семантическая верная HTML-разметка, может быть, для этого вам не нужен span:

.btn-design{
  background-color: orange;
  color: red;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  border-radius: 20%;
  white-space: nowrap;
  padding: 10px;
}

<a target="_blank" href="/SignUp" class="btn-design">
     Join BridgeBurma Today
</a>

Answer 2

Удалите Name в className, и это будет работать как шарм, см. Ниже

.btn-design{
  background-color: orange;
  color: red;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  border-radius: 20%;
  white-space: nowrap;
}

<a target="_blank" href="/SignUp">
   <button class="btn-design">Join BridgeBurma Today</button>
</a>