圆形按钮溢出的波纹效果

Question

我在设法使我的涟漪效应不超过其容器时遇到了问题。我设置了一个oveflow:hidden；但它不起作用，这是我的 fiddle https://jsfiddle.net/aqbmbrLy/

<div class="row clearfix expand-row">
    <a href="#Projets" class="expand-button scrollTo">
        <i class="medium mdi-navigation-expand-more host-expand actionbutton2">ab</i>
    </a>
</div>

我主要是想让涟漪效应不会超过点击时的黑色圆圈，但无论我为什么尝试它仍然会增长到完整的 .expand-button 而不是 .host-expand，这使得看起来很糟糕

Answer 1

检查这个link，我已经做了更改

.expand-row .expand-button .host-expand{
    width:100%;
    display:block;
}

添加上面的代码。

圆形按钮溢出的波纹效果

Ripple effect overflowing out of circular button

html

javascript

css

jquery

material-design