Touch Ripple

    Touch Ripple is supported only in Material Theme

    Framework7 Material Theme comes with great an dynamic implementation of Material Touch Ripple effect.

    It is enabled by default for Material theme. Touch Ripple is a part of the built-in Fast Clicks library, so Fast Clicks should be also enabled.

    However, you may disable it by passing touch.materialRipple:false App parameter.

    Ripple Elements

    By default it is enabled for the elements that match to the following CSS selector:

    .ripple, .link, .item-link, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell, .notification-close-button

    which are defined in touch.materialRippleElements App parameter.

    So when you touch such elements you will see so called "ripple" effect.

    If you need to add "ripple" effect for any custom element you may add this element's selector to touch.materialRippleElements parameter or just add ripple class.

    <a href="#" class="my-link ripple">Link With Ripple Effect</a>

    Ripple Wave Color

    If you want to change color of "ripple" wave on some element, then you may add ripple-[color] class to required element, where [color] class is the one of default Theme Colors, for example:

    <a href="#" class="button ripple-color-red">Button With Red Ripple</a>

    or you may specify it using CSS by referencing .ripple-wave element:

    .button .ripple-wave {
        background-color: #ff0000;

    Disable Ripple For Specific Elements

    If you want to disable ripple element for specific elements, then you may add no-ripple class to such elements:

    <a href="#" class="button no-ripple">Button Without Ripple Effect</a>