Well, I dug through the Ionic 2 code a bit a while ago, and I found some directive called ‘ionic-button-effect’. I haven’t had time to test it, though, perhaps you could try it out and save me some time?
I tried adding <ion-button-effect></ion-button-effect> and tapping the card creates a ripple, in the right position of the X axis but out of the card (just below the navbar, where I assume is the closest <button>). It looks is designed to work with buttons only.
I am using cards and this would be awesome. I think I have a work around by putting the click action on the card and just below that a button tag with an ion-item attribute. The problem then is the if there is any ion-item tags you’d have to style the background to transparent.
<ion-card (click)="action()"> <button ion-item> <ion-item style="background: rgba(0,0,0,0);">Content</ion-item> </button> </ion-card>
As I see by sources of Ionic v3.3, a container element must contain an empty div element with button-effect class, also the container must have tappable attribute and be styled as position: relative; overflow: hidden.
In my project I use a following directive to style button-like containers: