多种颜色的HTML按钮

Question

我正在尝试使用 html 创建一个看起来像这样的按钮。我希望按钮看起来像一个在另一个之上，而不仅仅是彼此相邻的两个矩形（因此圆角边缘/边框半径很重要）。

如果有帮助，我将循环遍历文档列表并将它们显示为这种格式的按钮。它需要能够针对不同的文档名称/扩展名调整其宽度。如果文档名称太长，我不希望 .pdf/.docx 被覆盖。

我首先创建两个按钮并让每个按钮位于不同的 z 索引上，但我想知道是否有更好的方法来做到这一点。

有没有办法动态调整两个按钮的大小，使它们看起来像这样重叠，但能够调整它们的位置/宽度，以便它们的文本仍然可见？

我确信这是一个简单的修复 - 但我被困住了

<button style="position: absolute; padding: 10px 20px; background-color: darkgray; border-radius: 15px; border: none; z-index: 1;">Document</button>
<button style="position: absolute; padding: 10px 50px; background-color: gray; border-radius: 15px; border: none; z-index: 0;">.pdf</button>

Answer 1

body {
  margin: 20px;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

button {
  border: 0;
  background: #555;
  color: white;
  font-family: sans-serif;
  font-size: 25px;
  border-radius: 15px;
  padding: 0 20px 0 0;
  white-space: nowrap;
}

button>*:first-child {
  background: #888;
  border-radius: 15px;
  display: inline-block;
  padding: 10px 20px;
  margin-right: 5px;
}

<div class="buttons">

  <button>
    <span>DocumentName</span>
    <span>.pdf</span>
  </button>

  <button>
    <span>a-very-long-document-name</span>
    <span>.docx</span>
  </button>

</div>