Ionic buttons

How to put two buttons on the corner of the page bottom-right and bottom-left?
Someone can help me to answer this question.

Use Footer/Toolbar in HTML and align them left and right in HTML in the end you can style them in CSS.

As example like this:

(do this below your ion-content so it remains always below!)
[if you want to style them add a class.]

<ion-footer no-border>
  <ion-toolbar position="bottom" class="fancyButton_Toolbar">
    <ion-button class="fancyButton" style="position: absolute; right: 0;">I am a Button RIGHT</ion-button>
    <ion-button class="fancyButton" style="position: absolute; left: 0;">I am a Button LEFT</ion-button>


  text-align: center;
.fancyButton_Toolbar .fancyButton{
  background-color: green;

You can also put this -> style="position: absolute; left: 0;" in your CSS but since in this example I want both buttons the same settings just a different position its more efficient to code it into HTML since you would have to make a complete new class in CSS just for one position switch.

Hope this helps you out, have fun coding! :four_leaf_clover::blush:

1 Like

Thanks for your help!

1 Like

You don’t have to add css for the placement of the buttons.

Pls check this example:
Example source:
Note the <ion-buttons start> and <ion-buttons end>

1 Like