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

您可以在github上找到自定义按钮的示例。

我可以提供一个片段：

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

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

您可以在应用程序中的任意位置添加它，这是使用CSS4完成的。

如果您打算进行所有更改，请ion-button考虑全局进行更改。

在此处检查可用的自定义控件属性。