angular material 的 btn + Icon

1.

<button mat-icon-button class="ripple"><mat-icon>search</mat-icon></button>

 

2.

.ripple {

position: relative;

//隐藏溢出的径向渐变背景

overflow: hidden;

}

 

.ripple:after {

content: "";

display: block;

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

pointer-events: none;

//设置径向渐变

background-image: radial-gradient(circle, #666 10%, transparent 10.01%);

background-repeat: no-repeat;

background-position: 50%;

transform: scale(10, 10);

opacity: 0;

transition: transform .3s, opacity .5s;

}

 

.ripple:active:after {

transform: scale(0, 0);

opacity: .3;

//设置初始状态

transition: 0s;

}