Ripple

Metro UI provides simple method to create ripple effect when object clicked.

Create ripple effect

To add ripple effect for object you must add attribute data-role="ripple".


                    <button class="command-button" data-role="ripple">
                        <span class="mif-share icon"></span>
                        <span class="caption">
                            Yes, share and connect
                            <small>Use this option for home or work</small>
                        </span>
                    </button>
                

Ripple targets

Also you can define sub elements for ripple effect. To define sub elements add attribute data-ripple-target. An attribute can take name, class or id of selector.


                    <ul class="v-menu border bd-light" data-role="ripple" data-ripple-target="li">
                        <li class="menu-title">General</li>
                        <li><a><span class="mif-home icon"></span> Home</a></li>
                        <li class="menu-title">Products</li>
                        <li><a><span class="mif-windows icon"></span> Windows</a></li>
                        <li><a><span class="mif-skype icon"></span> Skype</a></li>
                        <li class="menu-title">Shop</li>
                        <li><a><span class="mif-cart icon"></span> Cart</a></li>
                    </ul>
                

Ripple color

To define ripple color add attribute data-ripple-color. An attribute can take a hex color value.


                    <button class="command-button" data-role="ripple" data-ripple-color="#1ba1e2">
                        <span class="mif-share icon"></span>
                        <span class="caption">
                            Yes, share and connect
                            <small>Use this option for home or work</small>
                        </span>
                    </button>
                

Ripple alpha channel

To define alpha factor for ripple effect, you can use attribute data-ripple-alpha. An attribute can take value from 0 to 1.


                    <button class="command-button bg-green"
                            data-role="ripple"
                            data-ripple-color="#CE352C"
                            data-ripple-alpha=".2">
                        <span class="mif-share icon"></span>
                        <span class="caption">
                            Yes, share and connect
                            <small>Use this option for home or work</small>
                        </span>
                    </button>

                    <button class="command-button bg-green"
                            data-role="ripple"
                            data-ripple-color="#CE352C"
                            data-ripple-alpha="1">
                        <span class="mif-share icon"></span>
                        <span class="caption">
                            Yes, share and connect
                            <small>Use this option for home or work</small>
                        </span>
                    </button>