ion-button v5 style issue

Hi,

I’m having a problem on stying the ion-button component in v5.

In v4 i use to do this (which worked pretty fine), but i cannot achieve the same result on v5 :

ion-button {

--background: var(--ion-color-primary);
--background-activated: #fff;
--background-focused: #fff;
--background-hover: #fff;

--color: var(--ion-color-primary-contrast);
--color-activated: var(--ion-color-primary);
--color-focused: var(--ion-color-primary);
--color-hover: var(--ion-color-primary);

--transition: all .5s;

--border-width: 1px;
--border-style: solid;
--border-color: var(--ion-color-primary);

--box-shadow: none;

}

I’ve tried this on v5 :

ion-button {

--background: var(--ion-color-primary);
/*--background-activated: #fff;*/
/*--background-activated-opacity: 1;*/
--background-focused: #fff;
--background-focused-opacity: 1;
--background-hover: #fff;
--background-hover-opacity: 1;

--color: var(--ion-color-primary-contrast);
/*--color-activated: var(--ion-color-primary);*/
--color-focused: var(--ion-color-primary);
--color-hover: var(--ion-color-primary);

--transition: all .5s;

--border-width: 1px;
--border-style: solid;
--border-color: var(--ion-color-primary);

--box-shadow: none;
--opacity: 1;

}

But i do have two problems :

1. The ripple effect its somehow hidden when i use –background-hover-opacity: 1; (actually i need the background-color of the button to be white on hover and focus).
2. The transition is only working on the color property and not on the background-color.

Thanks for your time,

1 post - 1 participant

Read full topic