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.
Hey there 👋 we want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
data-te-ripple-init attribute you can also easily add the
ripple effect to images.
You can easily manipulate the color of the ripple effect to suit your needs.
data-te-ripple-color attribute you can change its color.
If you don't want the ripple effect to move on the button too quickly, use
data-te-ripple-duration attribute and modify the duration of
If you add the attribute
ripple will always start at the center of the element, not at the affected
If you use the
data-te-ripple-unbound="true" attribute, the
ripple will not be bound to the element and will extend beyond its
data-te-ripple-radius attribute can be used to modify the
ripple radius. The numeric value is expressed in pixels, for example:
If you are looking for more advanced options, try Bootstrap Ripple from MDBootstrap.