How to add styles to ion-button inner text?

Ionic Framework
6

All of the text properties that can be inherited are inherited in a button. So the following would work in the case of a button to target all of the text:

ion-button {
  text-transform: none;
}

Here’s a larger list of the inheritable font properties:

font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit;
letter-spacing: inherit;
text-decoration: inherit;
text-overflow: inherit;
text-transform: inherit;
text-align: inherit;
white-space: inherit;

However, for the original comment, because you want them to be different while inside of the button and you have full control over the text you are adding in the button, you should wrap the text you want to customize in a span and a div.

<ion-button size="large" class="two-lines">
  <div>
    <span>Open my</span><br>
    new app
  </div>
</ion-button>

.two-lines {
  min-width: 10em;
}

.two-lines span {
  text-transform: none;
  font-size: 14px;
}

Here’s a Codepen example of styling buttons: https://codepen.io/brandyscarney/pen/gqKGNv?editors=1100#0