Ionic framework ionic 4更改按钮的大小和颜色问题

我使用以下代码来允许我在单击按钮时更改按钮的颜色。它很好用。但是当我尝试添加CSS来更改按钮的宽度和高度时。颜色变化正常，但按钮大小没有变化。这是我的密码：

html code 
<ion-content padding>
   <ion-row>
       <ion-col width-50 style="text-align: right" no-padding >
    <button ion-button full no-margin class="bsize" (click)="addEvent('b1');" [ngStyle]="{'background-color': buttonColorb1}">button 1</button>
</ion-col>
 <ion-col width-50 style="text-align: left" no-padding>
    <button ion-button full no-margin class="bsize" (click)="addEvent('b2');" [ngStyle]="{'background-color': buttonColorb2}">button 2</button>
  </ion-col>
  </ion-row>

</ion-content>

scss code :

.bsize {
   --width: 100px;
   --height: 40px;
}

ts code :

export class TestButtonPage implements OnInit {
buttonColorb1: string = '#D3D3D3'; //Default Color
buttonColorb2: string  = '#D3D3D3'; //Default Color
constructor() { }

addEvent(btn){
if (btn == "b1") {
   this.buttonColorb1 = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
}
else {
   this.buttonColorb1   = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
  }
}
ngOnInit() {
   this.buttonColorb1 = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
 }
 }

html代码
按钮1
按钮2
scss代码：
.bsize{
--宽度：100px；
--高度：40px；
}
ts代码：
导出类TestButtonPage实现OnInit{
buttonColorb1:string='#d3d3'；//默认颜色
buttonColorb2:string='#d3d3'；//默认颜色
构造函数（）{}
附录（btn）{
如果（btn=“b1”）{
this.buttonColorb1='#add8e6'；//所需颜色
this.buttonColorb2='#d3d3'；//所需颜色
}
否则{
this.buttonColorb1='#add8e6'；//所需颜色
this.buttonColorb2='#d3d3'；//所需颜色
}
}
恩戈尼尼特（）{
this.buttonColorb1='#add8e6'；//所需颜色
this.buttonColorb2='#d3d3'；//所需颜色
}
}

在CSS下方使用，

.bsize {
  width: 100px;
  height: 40px;
}

---

在CSS下方使用，

.bsize {
  width: 100px;
  height: 40px;
}