How to change ion-button size in Ionic 4?

Question

I'm having trouble changing the size of my ion-button in Ionic 4. This same code used to work in the previous version, Ionic 3. I've modified my width and height of the button, but nothing works.

All that shows is the standard ion-button with an unchanged height/width.

page.scss

.button {
        display: table;
        margin: 0 auto;
        border-radius: 4px;
        margin-top: 27px;
   .login {
        font-family: $font;
        letter-spacing: 2px;
        width: 280px;
        height: 50px;
        display: block;
        border-radius: 4px;
    }
}

page.html

<div class="button"><ion-button class="login" (click)="login(oldUser)">LOGIN</ion-button></div>

Answer 1

You can find example on github for custom buttons.

I can provide a snippet:

<ion-button class="round">rounded</ion-button>

    .round {
  --width: 60px;
  --height: 60px;
  --border-radius: 50%;
  --vertical-align: middle;
  --padding-start: 10px;
  --padding-end: 10px;
}

You can add it where you want in your app, this is done using CSS4.

If you plan on changing all ion-button consider doing so globally.

Check here for Available custom control properties.