HTML Buttons with Images - Sugarcube

[Studio31]

So i am making my game and I have these standard rectangle buttons but I want to change them to look like this. Image, round corners, stroke and button text in bottom right with a background to make it legible. If this is super complex and someone has a similar solution that would be great or even guide me to where I could learn the same. I have looked on W3 and couldn't figure it out

 

[Alcahest]

button {
    border-width:0px;
    border-radius:10px;
    background-color:#0005;
    color:#fff;
    font-size:20px;
    font-weight:700;
    padding:20px;
  }

 

[guest1492]

There are many ways to do it but the easiest is probably something like this:

<div class='navlink' data-passage='office'><img src='images/office.png'><span>My Office</span></div>

.navlink {
    position: relative;
    cursor: pointer;
    width: 200px;
    height: 100px;
    border: 20px solid #fff;
    border-radius: 30px;
}
.navlink img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.navlink span {
    position: absolute;
    right: 30px;
    bottom: 30px;
    border-radius:10px;
    background-color:#0005;
    color:#fff;
    font-size:20px;
    font-weight:700;
    padding:20px;
}