Ion-button Gradient Background color issue

Ionic Framework Ionic Vue
1

Tag:

Button

My CSS:

.testBtn::part(native){background: rgba(237,36,0,1);
background: -moz-linear-gradient(left, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(237,36,0,1)), color-stop(100%, rgba(0,99,51,1)));
background: -webkit-linear-gradient(left, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
background: -o-linear-gradient(left, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
background: -ms-linear-gradient(left, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
background: linear-gradient(to right, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#ed2400’, endColorstr=‘#006333’, GradientType=1 );}

image
image721×266 18.5 KB

Output :
image

Looks like those corners Gradient colors are changing there directions. why?

Please help me…!

2

Applied the same styles and it seems to be working fine

image
image1429×355 53.4 KB

Ionic 6 Angular
html:

<ion-content [fullscreen]="true">
  <ion-button class="testBtn">Gradient button</ion-button>
</ion-content>

style

.testBtn::part(native){background: rgba(237,36,0,1);
  background: -moz-linear-gradient(left, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(237,36,0,1)), color-stop(100%, rgba(0,99,51,1)));
  background: -webkit-linear-gradient(left, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
  background: -o-linear-gradient(left, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
  background: -ms-linear-gradient(left, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
  background: linear-gradient(to right, rgba(237,36,0,1) 0%, rgba(0,99,51,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ed2400, endColorstr=#006333, GradientType=1 );}
3

My Fault ! Thank you so much :+1:.