CSS: Placing a button over an Image

I am trying to make a button class that I can repeat across the website and several different images but I am unable to get this to overlap the image in the place where I would like, example bottom right. It is sitting in obscure areas that aren't relevant to the container?

I am aware that using an actual size (i.e px) for

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.HomepageBannerContainer {
}
.HomepageBannerImage1 {
  position: relative;
  height: 100%;
  width: 100%;
}
.buttonOnImage {
  position: absolute;
  bottom: 0px;
  right: 15px;
  border-color: Goldenrod;
  border-style: solid;
  background-color: transparent;
  padding: 15px 32px;
  text-align: center;
  color: goldenrod;
  font-size: 16px;
  cursor: pointer;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
}
.buttonOnImage:hover {
  background-color: ;
  color: white;
}

<!-- language: lang-html -->

  <div class="HomepageBannerContainer"> 
     <img src="https://mvdataappstorageuscaprod.blob.core.windows.net/medialibrary-77aaba81e0484f88ba36c3c3b1e9c663-r/885635f1713f4b9ea1ceb61b3aba783f/885635f1713f4b9ea1ceb61b3aba783f/Large/4000D_RGB_AF_WHITE_RENDER_24.png?sv=2017-04-17&sr=b&si=201911192214&sig=5TpJjopZRU%2FP5fwW4FBdL1jW12h8hx2PgtfyINKMkmM%3D&st=1404-09-08T23%3A38%3A03Z&se=2033-03-20T00%3A26%3A35Z" alt="" class="HomepageBannerImage1">
<button class="buttonOnImage" type="button"> Corsair Configuration
    </button>
  </div>

<!-- end snippet -->

Try this (only the CSS was edited) :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.HomepageBannerContainer {
  position: relative;
}

.HomepageBannerImage1 {
  height: 100%;
  width: 100%;
}

.buttonOnImage {
  position: absolute;
  /* this will position it relative to its container */
  top: 50%;
  /* these next three lines will position it in the middle of the image */
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: Goldenrod;
  border-style: solid;
  background-color: transparent;
  padding: 15px 32px;
  text-align: center;
  color: goldenrod;
  font-size: 16px;
  cursor: pointer;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 30%, 75% 0);
}

.buttonOnImage:hover {
  background-color: ;
  color: white;
}

<!-- language: lang-html -->

<div class="HomepageBannerContainer">
  <img src="https://mvdataappstorageuscaprod.blob.core.windows.net/medialibrary-77aaba81e0484f88ba36c3c3b1e9c663-r/885635f1713f4b9ea1ceb61b3aba783f/885635f1713f4b9ea1ceb61b3aba783f/Large/4000D_RGB_AF_WHITE_RENDER_24.png?sv=2017-04-17&sr=b&si=201911192214&sig=5TpJjopZRU%2FP5fwW4FBdL1jW12h8hx2PgtfyINKMkmM%3D&st=1404-09-08T23%3A38%3A03Z&se=2033-03-20T00%3A26%3A35Z"
    alt="" class="HomepageBannerImage1">
  <button class="buttonOnImage" type="button"> Corsair Configuration
    </button>
</div>

<!-- end snippet -->