DEV Community

Cover image for TW Elements - Ripple effect. Free UI/UX design course
Keep Coding
Keep Coding

Posted on • Updated on • Originally published at tw-elements.com

TW Elements - Ripple effect. Free UI/UX design course

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).

Image description

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;HTML:

<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>
Enter fullscreen mode Exit fullscreen mode

And then you need to import and initialize it in your JavaScript (the same way as we did with Navbar in the previous lesson); Javascript:

// Initialization for ES Users
import {
  Ripple,
  initTWE,
} from "tw-elements";

initTWE({ Ripple });
Enter fullscreen mode Exit fullscreen mode

After saving the file the Ripple Effect will start working:

Image description

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.

Image description

HTML:

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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"

Image description

HTML:

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

You can even use HEX, RGB or HSL color codes directly:

Image description

HTML:

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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; HTML:

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

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  });
Enter fullscreen mode Exit fullscreen mode

After saving the file, Ripple Effect should start working in our button:

Image description

Step 3 - Enjoy the fruits of your labour!

DEMO AND SOURCE CODE FOR THIS LESSON

Top comments (0)