How to implement ripple effect?

How to implement ripple effect like you have shown as below in screenshot:-


Hi , try with this pluging


This plugin is for ionic version 1

and the ripple effect is there in ionic 3 by default

my problem is i want to give ripple effect as i showed in my screenshot above

Have you got any working solution?

Hello, @surajkhanal10
Not yet

Have you tried with this directive?

import {Directive, ElementRef, Host, Renderer2} from '@angular/core';

    selector: '[m-ripple-effect]',
    host: {
        'tappable': '',
        'role': 'button',
        'style': 'position: relative; overflow: hidden'
export class RippleEffectDirective {
    constructor(@Host() host: ElementRef, renderer: Renderer2) {
        const div = renderer.createElement('div');
        renderer.addClass(div, 'button-effect');
        renderer.appendChild(host.nativeElement, div);

Hello, @surajkhanal10

where i put above code in my project?

Generate new directive with command ionic generate directive name . replace name with whatever you like. and import that directive in app.module.ts file . now you can add m-ripple-effect attribute to your element.

Hello, @surajkhanal10

When i click on button i want to see ripple effect(means some delay i want)
but it instantly open new page because i wrote code that onclick go to next page

Hi, I know this is an old tread. You can try I hope this will help someone who still looking for solution.