Ripples

Otherwise known as waves, this component adds a fancy ripple effect to element click/hovers.

Usage

There are two ways to instantiate the component once the relevant JS and CSS have been included: via a data attribute, or simply with classes.

Example

Click me Click me Hover and click me I'm light! I'm floating!

Click me I'm simple Click me One Ripple At Once Hover me

Images

Other Elements

  • A Panel

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi provident sed inventore atque deserunt ut, est accusamus magni doloribus reprehenderit.

  • A Panel

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi provident sed inventore atque deserunt ut, est accusamus magni doloribus reprehenderit.

Markup

<a href="#" class="f-btn" data-f-ripple>Click me</a>
<a href="#" class="f-btn f-ripple">Click me</a>

JavaScript Options

This is an example of how to set options via attribute/classes:

data-f-ripple="{hover:true}" or class="f-ripple f-ripple-hover"
Option Possible value Default Description Class
only_one boolean false Whether to only show one ripple at once n/a
light boolean false Show a light overlay f-ripple-light
classic boolean false No gradient for the ripple effect f-ripple-classic
hover boolean false Triggers on button hover f-ripple-hover
float boolean false Adds a 'float' animation f-ripple-float