Basic example
The ripple effect is a way to let the user know that there has been a click interaction. You can easily add a ripple effect to the buttons component.
<div class="flex space-x-2 justify-center">
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
>Button</button>
</div>
Image
Wsing data-mdb-ripple="true" attribute you can also easily add the ripple effect to images.
<div class="flex flex-wrap justify-center">
<a href="#!" data-mdb-ripple="true">
<img src="https://mdbootstrap.com/img/new/standard/city/043.jpg" class="max-w-sm h-auto" alt="" />
</a>
</div>
Colors
You can easily manipulate the color of the ripple effect to suit your needs. By using data-mdb-ripple-color attribute you can change its color.
<div class="flex flex-col justify-center space-y-2 xl:flex-row xl:space-y-0 xl:space-x-2">
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="primary"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Primary
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="secondary"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Secondary
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="success"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Success
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="danger"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Danger
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="info"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Info
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light"
class="inline-block px-6 py-2.5 bg-gray-800 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-900 hover:shadow-lg focus:bg-gray-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-900 active:shadow-lg transition duration-150 ease-in-out">
Light
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="dark"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Dark
</button>
</div>
<div class="flex flex-col justify-center space-y-2 xl:flex-row xl:space-y-0 xl:space-x-2">
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="red"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Red
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="green"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Green
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="blue"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Blue
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="yellow"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Yellow
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="orange"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Orange
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="purple"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Purple
</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="aqua"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out">
Aqua
</button>
</div>
<div class="flex flex-col justify-center space-y-2 xl:flex-row xl:space-y-0 xl:space-x-2">
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="#c953d6"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
>
#c953d6
</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="#44c6e3"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
>
#44c6e3
</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="#fcc834"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
>
#fcc834
</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="#386f06"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
>
#386f06
</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="#c1303a"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
>
#c1303a
</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="#a57c3e"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
>
#a57c3e
</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="#192ced"
class="inline-block px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
>
#192ced
</button>
</div>
Duration
If you don't want the ripple effect to move on the button too quickly, use data-mdb-ripple-duration attribute and modify the duration of the ripple.
<div class="flex flex-col justify-center space-y-2 xl:flex-row xl:space-y-0 xl:space-x-2">
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Default
(500ms)</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" data-mdb-ripple-duration="1000ms"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Duration
1s</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" data-mdb-ripple-duration="3s"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Duration
3s</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" data-mdb-ripple-duration="5s"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Duration
5s</button>
<button type="button" data-mdb-ripple="true" data-mdb-ripple-color="light" data-mdb-ripple-duration="10s"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">Duration
10s</button>
</div>
Centered
If you add the attribute data-mdb-ripple-centered="true", the ripple will always start at the center of the element, not at the affected location.
<div class="flex space-x-2 justify-center">
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
data-mdb-ripple-centered="true"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
>Button</button>
</div>
Unbound
If you use the data-mdb-ripple-unbound="true" attribute, the ripple will not be bound to the element and will extend beyond its boundaries.
<div class="flex space-x-2 justify-center">
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-unbound="true"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
>Button</button>
</div>
Radius
The data-mdb-ripple-radius attribute can be used to modify the ripple radius. The numeric value is expressed in pixels, for example: data-mdb-ripple-radius="10"
<div class="flex flex-col justify-center space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2">
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
>Default</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
data-mdb-ripple-radius="10"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
>10</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
data-mdb-ripple-radius="25"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
>25</button>
<button
type="button"
data-mdb-ripple="true"
data-mdb-ripple-color="light"
data-mdb-ripple-radius="50"
class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
>50</button>
</div>
If you are looking for more advanced options, try Bootstrap Ripple from MDBootstrap.