how to create an upgrade box in html and css-CodePudding

I'm creating a game. I need upgrades-button for that game so this is what I tried:

#upgbtn {
  padding: 4px 16px;
  background: yellowgreen;
  border: 4px solid black;
  border-radius: 10px;
}

#upgrade1 {
  padding: 9px 10px;
  background: yellow;
  border: 4px solid black;
  border-radius: 10px;
}

<div id="upgrade1">
  LV <span id="lvs">1</span>
  <div>
    <button id="upgbtn">Upgrade</button>
  </div>
</div>

That is way too long. But that one I want is the one when it is a box but not a long rectangle.

I tried using inline elements like <a>, <span> and more. This is the result:

#upgbtn {
  padding: 4px 16px;
  background: yellowgreen;
  border: 4px solid black;
  border-radius: 10px;
}

#upgrade1 {
  padding: 9px 10px;
  background: yellow;
  border: 4px solid black;
  border-radius: 10px;
}

<span id="upgrade1">
LV <span id="lvs">1</span>
<div>
  <button id="upgbtn">Upgrade</button>
</div>
</span>

And that is the last thing I tried.

CodePudding user response：

There multiple ways to solve it. as @TemaniAfif already stated in the comments upgrade1 { display: inline-block } is one way to solve it.

Another option would be to set the width to min-content: upgrade1 { width: min-content }

#upgbtn {
  padding: 4px 16px;
  background: yellowgreen;
  border: 4px solid black;
  border-radius: 10px;
}

#upgrade1 {
  padding: 9px 10px;
  background: yellow;
  border: 4px solid black;
  border-radius: 10px;
  width: min-content;
}

<div id="upgrade1">
  LV <span id="lvs">1</span>
  <div>
    <button id="upgbtn">Upgrade</button>
  </div>
</div>