Material Design ripple effect on other element than button


I wonder, would it be possible to reuse the Material Design CSS ripple effect on other HTML element than button, for example a div? Or would it be easier to create own ripple effect in CSS?


Material Design provides a ripple component out of the box, it can be used like this:

In .ts file:

import {MatRippleModule} from '@angular/material/core';

In view:

<div matRipple [matRippleColor]="myColor"> 

Examples and more information about the component can be found here:

Answered By – LordSilvermort

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.