Ripple effect
Perhaps you know (or maybe you are finding it out now 😉) TW Elements is based on a design system called Material Minimal.
Material Minimal is an improved version of the famous Material Design, a system created by Google.
One of the most distinctive things about Material Design and Material Minimal is the so-called Ripple Effect (or Waves Effect).
Click the button or image below to see the Ripple Effect in action.
I don't know about you, but I just love this effect 😍 Even though it was introduced years ago, I never get bored and sometimes I can click on a given element for a long time just to watch the waves spreading 😅
Ripple effect in TW Elements
Thanks to TW Elements, you can easily add a Ripple Effect to a given element.
The ripple method In TW Elements provides a radial action in the form of a visual ripple expanding outward from the user’s touch. Ripple is a visual form of feedback for touch events providing users a clear signal that an element is being touched.
Basic example
You can easily add a ripple effect for example to the buttons component.
You just need to add data-twe-ripple-init attribute to the
button element:
<button
type="button"
data-twe-ripple-init
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
Button
</button>
And then you need to import and initialize it in your JavaScript (the same way as we did with Navbar in the previous lesson):
// Initialization for ES Users
import {
Ripple,
initTWE,
} from "tw-elements";
initTWE({ Ripple });
After saving the file the Ripple Effect will start working. Click the button below to see it.
Colors
By default the color of the ripple is dark gray but you can easily
manipulate the it by using
data-twe-ripple-color attribute you can change its color.
For example data-twe-ripple-color="primary" will set the color
of the ripple to the primary color.
<!-- Primary ripple color -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="primary"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
Primary
</button>
<!-- Success ripple color -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="success"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
Success
</button>
<!-- Danger ripple color -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="danger"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
Danger
</button>
<!-- Info ripple color -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="info"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
Info
</button>
<!-- Light ripple color -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="light"
class="inline-block rounded bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-neutral-900 hover:shadow-lg focus:bg-neutral-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-lg">
Light
</button>
<!-- Dark ripple color -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="dark"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
Dark
</button>
You can also use direct color names like red or
purple.
Try for example data-twe-ripple-color="red" or
data-twe-ripple-color="purple"
<!-- Red ripple color button -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="red"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
Red
</button>
<!-- Purple ripple color button -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="purple"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
Purple
</button>
You can even use HEX, RGB or HSL color codes directly:
<!-- Ripple color: #c953d6 -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="#c953d6"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
#c953d6
</button>
<!-- Ripple color: rgb(43, 84, 151) -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="rgb(43, 84, 151)"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
rgb(43, 84, 151)
</button>
<!-- Ripple color: hsl(107, 55.7%, 38%) -->
<button
type="button"
data-twe-ripple-init
data-twe-ripple-color="hsl(107, 55.7%, 38%)"
class="inline-block rounded bg-neutral-200 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-700 shadow-md transition duration-150 ease-in-out hover:bg-neutral-300 hover:shadow-lg focus:bg-neutral-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-neutral-400 active:shadow-lg">
hsl(107, 55.7%, 38%)
</button>
The Ripple effect method has many more options available and if you want to take a look at them take a look at the Ripple Effect documentation page.
Now let's get back to our project.
Step 1 - add Ripple Effect attributes to the button
To the button in our Call to action, add the Ripple Effect initialization attribute and the second one, which will set its color as primary:
<!-- Call to action -->
<div class="text-center text-white">
[...]
<!-- Button -->
<a
href="#"
role="button"
data-twe-ripple-init
data-twe-ripple-color="primary"
class="inline-block rounded-full bg-primary-100 px-7 pb-2.5 pt-3 text-sm font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
Learn with me [...]
</a>
</div>
Step 2 - initialize Ripple Effect
Then go to your src/js/index.js file and add
Ripple to import and then to
initialization.
Your index.js file should look like this in the end, taking
into account the Ripple initialization and the initializations we did in
previous lessons:
// Initialization for ES Users
import { Collapse, Dropdown, Ripple, initTWE } from 'tw-elements';
initTWE({ Collapse, Dropdown, Ripple });
After saving the file, Ripple Effect should start working in our button:
And as always - if anything isn't clear or doesn't work as it should do not hesitate to write me on twitter 😉
About author
Michal Szymanski
Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.