为什么我的<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标记，也许您不需要跨度：

.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>