I use ionic to build a react webapp.

Of course there are various buttons and I use the “IonButton” class from Ionic.
As you can see in the screenshot, it looks like it uses two designs at the same type or that each button has two overlapping buttons.
In the screenshot, the “–company-color-hover” is active, so you can see that the red on the login button is different around the text compared to the border and you can see a round shape, which resembles the border-radius for IonButton from the global.css.
You can see it even clearer in the google login button, which i colored blue but still uses the “company-color” variable from the css (the red color).
The issue seems to exist, even when i use a clean IonButton with no classes and only text.
I tried to delete classes, added edges for Ion-Button but i cannot get rid of the design or whatever hides behind the button.

To make it more clear: for all buttons, for exmaple the one with the class “googleLoginButton” I only want to see the part that is now blue and rounded, but not the red surrounding shape.

<IonPage>
  <IonHeader>
    <IonToolbar className="app-toolbar">
      <IonTitle className="app-title">Login</IonTitle>
    </IonToolbar>
  </IonHeader>
  <IonContent className="app-content ion-padding">
    <form className="login-form" onSubmit={handleSubmit}>
      <div className="input-group">
        <IonInput
          name="email"
          type="email"
          placeholder="Email"
          value={email}
          onIonChange={e => setEmail(e.detail.value!)}
          required
        />
      </div>
      <div className="input-group">
        <IonInput
          name="password"
          type="password"
          placeholder="Password"
          value={password}
          onIonChange={e => setPassword(e.detail.value!)}
          required
        />
      </div>
      <IonButton expand="block" type="submit" >
        Login
      </IonButton>
    </form>
    <div className="divider">or</div>
    <IonButton expand="block" onClick={handleGoogleLogin} className="googleLoginButton">
      Login with Google
    </IonButton>
    <IonLoading isOpen={isLoading} message="Please wait..." />
  </IonContent>
</IonPage>

And here the css lines:

/* global.scss */
:root {
  --company-color: #800020;
  --company-color-hover: #a00030;
  --app-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
ion-button {
  --background: var(--company-color);
  --background-hover: var(--company-color-hover);
  --color: white;
  --box-shadow: none;  /* This removes any shadow */
  --padding-top: 0px;
  --padding-bottom: 0px;
  --border-radius: 100px;
}
/*login.css*/
ion-button.googleLoginButton {
  --background: #4285F4;
  --background-hover: #357AE8;
  --background-activated: #357AE8;
  --background-focused: #357AE8;
  --color: #ffffff;
  --ripple-color: #ffffff;
}