How can I make the button more visible?

I got an ion-button (button using the ionic framework) that's just too low. This is an ionic/angular project. I feel like I've tried everything to pull it up, but my attempts have resulted in failures (pulling the button up but the button aligns left; pushing button down; pulling button up but the button budges a little right of center... etc). I've tried playing with margin, spacing, padding; I've tried absolute positioning; I've even tried flexbox and ion-grid.

All I want to do is pull up the button, almost like a footer, and keep it centered.

Here is my code:

HTML code

<div class="bottomBar">    <ion-button> <!-- <fill="block" style="position: absolute; bottom:50px;"> -->      Order Skirt    </ion-button>  </div>  

CSS code

.bottomBar {    z-index: 2;    //padding-bottom: 30px;    text-align: center;    //margin-left: 50vw;    //margin-right: 50%;    //width: 100% - 30px;  }  

Thanks for looking.

https://stackoverflow.com/questions/65866581/how-can-i-make-the-button-more-visible January 24, 2021 at 10:18AM