Change CSS properties of ionic button-CodePudding

I am looking for help with changing some CSS properties of my button in my Ionic app.

I want my button to look like this:

This is how it looks like now:

I have figured out that if I want to achieve my desired look I have to change the CSS property justify-content: center; of the DOM generated div with class button-inner to justify-content: space-between;... the problem is I don't know how to properly target this element in my SCSS file... I have tried with bellow examples as seen in the docs but nothing works...

  .button-native {
    span {
      justify-content: space-between;
    }
  }
  ion-button:scope(native) {
    span {
      justify-content: space-between;
    }
  }
  ion-button:scope(native) {
    .button-native {
      justify-content: space-between;
    }
  }
  ion-button:root(native) {
    span {
      justify-content: space-between;
    }
  }
  ion-button:root(native) {
    .button-native {
      justify-content: space-between;
    }
  }

Here is also my HTML markup for the button:

<ion-button expand="block">Add to cart <span>{{ 123 }} €</span></ion-button>

what am I missing? What am I doing wrong?

CodePudding user response：

I don't know how to change inner-button, but since the span is flex, the solution that I've used is this:

<ion-button expand="block">Add to cart 
<div style="flex-grow: 10;"></div>
<span>{{ 123 }} €</span></ion-button>

CodePudding user response：

Don't use the ion-button tag you wont be able to change the css since it's styles lay in the shadow dom.

Instead create a button in a div and use ionic's ripple effect to simulate the button effect when clicked:

<div  (click)="doSomething()">
  <ion-ripple-effect></ion-ripple-effect>
  <div >
    <span>Add to cart</span>
  </div>
  <div >
    <span>€</span>
  </div>
</div>

.btn-container {
  background-color: blue;
  border-radius: 8px;
  height: 40px;
  width: 240px;

  .label {
    margin: 8px;
    float: left;
    color: white;
    font-weight: 500;
  }

  .amount {
    margin: 8px;
    float: right;
    color: white;
    font-weight: 500;
  }
}