HTML button with multiple colors

I’m trying to create a button that looks like this using html. I want the button to look like one is on top of the other, not just two rectangles next to each other (so the rounded edges/border-radius is important).

If it helps, I’m looping over a list of documents and displaying them as buttons in this format. It needs to be able to adjust its’ width for different document names/extensions. I don’t want the .pdf/.docx to be covered if the document name is too long.

button design

I started by creating two buttons and having each on a different z-index, but I’m wondering if there’s a better way to do this.

Is there a way to dynamically size two buttons so that they appear overlapping like this, but are able to adjust their location/width so their text is still visible?

I’m sure this is a simple fix – but I’m stuck

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

>Solution :

Use a single button but wrap the document name in a span, then you can apply different styling to the document name and the button itself.

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>span {
  background: #888;
  border-radius: 15px;
  display: inline-block;
  padding: 10px 20px;
  margin-right: 5px;
}

<div class="buttons">

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

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

</div>