centering 2 buttons on the div bootstrap

I'm trying to do this mockup...

... and I came to the point where I need to put these 2 buttons on the image. I managed to put one button, but the second one is not working. This is the code for first button.

#img_container {
  position:relative;
  display:block;
  text-align:center;
}
.button {
  position:absolute;
  bottom:50%;
  right:50%;
  width:200px;
  height:50px;
  margin:0px -100px -15px 0px;
  background-color: rgb(246, 175, 228);
  border: none;
  box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);;
  font-size: 1.3em;
  color: white;
  text-transform: uppercase;
}

<div id="img_container" class=" "text-center col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <img src="img/homepicture.jpg"/>
    <button class="button">lazybop</button><br>
    <button class="button1">see the products</button>
</div>

Then I tried to use the same code, but just decrease the number of bottom property to 40%, but it still remains in the same place.

.button1 {
  position:absolute;
  bottom:40%;
  right:50%;
  width:200px;
  height:50px;
  background-color: rgb(246, 175, 228);
  border: none;
  box-shadow: 4.5px 7.794px 5px 0px rgba(0, 0, 0, 0.094);;
  font-size: 1.3em;
  color: white;
  text-transform: uppercase;
}