Button is longer than form inputs in Ionic 3 - ionic-framework

Question

We are trying to create a login form with rounded inputs. The problem is that after adding border-radius to inputs the login button becomes longer than inputs themselves. Here is the code:
<div class="appForm" ion-fixed padding margin-bottom style="position: absolute !important; top: 0%; bottom: 0%; left: 0; margin-bottom: 1%;">
<div class="logo">
<h2>Chat App</h2>
</div>
<ion-list style="margin-top: 43% !important">
<ion-item style="">
<ion-input class="input-field" [(ngModel)]="email" name="username" type="text" placeholder="Email"></ion-input>
</ion-item>
<ion-item>
<ion-input class="input-field" [(ngModel)]="password" name="password" type="password" placeholder="Password"></ion-input>
</ion-item>
<button ion-button block class="login-button" (click)="LoginUser()">Login</button>
<p class="signin">
<button ion-button block clear (click)="RegisterPage()">Sign Up</button>
</p>
</ion-list>
</div>
Also here are the styles:
ion-item {
background-color:transparent !important
}
.input-field {
border:2px solid;
border-radius: 20px;
color: color($colors, light) !important;
}
.login-button {
text-transform: none;
border-radius: 20px;
background:linear-gradient(to right, #DD2476, #FF512F);
color: color($colors, light);
margin-top:15px !important;
}
...
...
How can we make the login button on the same width as inputs?

Answer 1

As you added your ion-input in ion-item it will add default 16px padding from left.
So either you add your button into <ion-item> like below
<ion-item>
<button ion-button block class="login-button" (click)="LoginUser()">Login</button>
</ion-item>
Or you can override ion-item style and change or remove padding like below
default padding : padding-left: 16px;
ion-item {
background-color:transparent !important;
padding-left: 0px;
}
By doing this you can find your ion-input same like login button.
Hope this will helps!