How do you position buttons in the bottom corner

Question

How do you position buttons in the bottom corner

Navigation

#1 by (0 votes)

0

I've been having problem with html5 and css in ionic. one of these problems and positions the button below the slide and leaves them transparent, with a significant good size. But with the modifications I've been making, the buttons just do not move. wanted to rely on the help of staff who understands well of html5 and css. And of course, another problem. the slide that has in html5, does not have the 3 balls, containing the amount of slides that have.

It'sjustthatway.

html5

<ion-slidestyle="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;
}

html5 css ionic

asked by anonymous 13.10.2018 / 20:16

1 answer

Parameters with ':' Treat XML return with PHP

score 0 · Answer 1

Regarding the Button you can use the Flexbox concept to position it below your content. In the code I pass the display as flex and say that the content direction of the div container follows the column order. already for the button you can use the rgba: background: rgba (0,0,0, .5) format being the last alpha element (color opacity) , or the opacity property ranging from 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>