ionic-Buttons alignment

Question

I want to design a ionic template for landing page as shown in the below image.

My problem is I can't align those button to bottom of the screen. And also I want to align them horizontally.

Answer 1

Write them in the footer-bar

  <ion-footer-bar align-title="left" class="bar-assertive">
    <div class="buttons">
      <button class="button">Left Button</button>
    </div>
    <h1 class="title">Title!</h1>
    <div class="buttons" ng-click="doSomething()">
      <button class="button">Right Button</button>
    </div>
  </ion-footer-bar>

Answer 2

I hope to help you with my answer below:

  <!--1. Only css-->
  <div style="position: absolute; bottom: 0; text-align: center; z-index: 1000; width: 100%;">
    <div class="button-bar">
      <a class="button button-positive">Sign up</a>
      <a class="button button-balanced">Log in</a>
    </div>
  </div>

<!--2. Directive ion-footer-bar and class css button-bar-->
  <ion-footer-bar>
    <div class="button-bar">
      <a class="button button-positive">Sign up</a>
      <a class="button button-balanced">Log in</a>
    </div>
  </ion-footer-bar>

  <!--3. Directive ion-footer-bar and and without class button-bar-->
  <ion-footer-bar>
    <div style="text-align: center; width: 100%">
      <a class="button button-positive button-large">Sign up</a>
      <a class="button button-balanced button-large">Log in</a>
    </div>
  </ion-footer-bar>