How to position buttons in the bottom corner

Question

I’ve been having problems with Html5 and css on Ionic. one of these problems and positions the button below the slide and leaves them transparent, with a good significant size. But with the modifications I’ve been making, the buttons just don’t move. I wanted to count on the help of people who understand well Html5 and css. And of course, another problem. the slide that has on Html5, does not have the 3 balls, containing the amount of slides that has.

he just gets that way.

Html5

      <ion-slide style="background-color:Transparent">
          <img class="img" src="assets/imgs/img4.png">
          <div class="head">
            <h1>BibliCom</h1>
            <h5>O mais novo aplicativo de troca de livros!!</h5>
          </div>
      </ion-slide>

      <ion-slide style="background-color:Transparent" >
        <img class="img" src="assets/imgs/img2.png">
        <div>
          <h1>Troque livros</h1>
          <h2>Coloque os livros que deseja trocar com outros usuarios.</h2>
        </div>
      </ion-slide>

      <ion-slide style="background-color:Transparent">
        <img class="img" src="assets/imgs/img5.png">
        <div>
          <h1>Emprestimos</h1>
          <h2>Empreste e peça emprestados livros que gostou!</h2>
        </div>

      </ion-slide>

    </ion-slides>

    <div class="bt">
      <button class="bt1">Entrar</button>
    </div>
</ion-content>

css:

.estilo-slide{
  height: 92%;
}
.background {
  background-color: #6713d2;
  display: block;
}

.swiper-slide img {
  width: 250px;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  position: relative;
  top: -60px
}

.head h1 {
  font-size: 7vh!important;
  font-weight: lighter!important;
  font-family: 'Pacifico', cursive;
  color: #ffffff;
}

.head h5 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding-top: 2px;
  font-weight: 200;
  font-size: 80;
  color: #ffffff;

}

.bt {
  position: absolute;
  left: 5%;
  bottom: 20px;
  font: 200
}

.bt2 {
  width: 40px;
  height: 60px;
  width: 200px;
}

Answer 1

With respect to the Button you can use the concept of Flexbox to position it below its content. In the code I pass the display as flex and say the direction of the contents of div container follows the column order. already to the button you can use the format rgba: background: rgba(0,0,0, . 5) the last element being Alpha (the opacity) of the color, or the property opacity 0 to 1, in the code I passed the value 0.5.

.container{
  display: flex;
  flex-direction: column;
}

.container_content{
  width: 100%;
  height: 150px;
  background: #AFAFAF
}

.button{
  width: 100%;
  height: 50px;
  opacity: .5;
}

<div class="container">
  <div class="container_content"> Meu Conteúdo </div>
  <div class="container_button">
    <button class="button">Click</button>
  </div>
</div>