Setting transparent background on ionic 5 buttons (also on hover)

Finding your way in the UI of ionic can be a bit complicated. This snippet helps to guide you in creating transparent buttons.

First, create your button using <ion-button>:

<ion-button class="button-transparent" fill="clear"><span class="font-semibold text-sm">Show filters</span></ion-button>

Second, target the class using css. More specifically, use the --background-hover target:

.button-transparent {
  --background: transparentize(100);
  --background-hover: #FFFFFF;
}

Succes! You now have complete transparent buttons.