Tailwind Ripple method

The ripple method provides a radial action in the form of a visual ripple expanding outward from the user's touch. Download for free without registration.


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.