Touch Ripple

Konsta UI's Material Theme comes with implementation of Material Design Touch Ripple effect.

It is enabled by default for Material theme.

With these extra utility classes we can control touch ripple "wave" color:

ClassCSS
.touch-ripple-current--k-touch-ripple-color: rgba(0, 0, 0, 0.1)Inherits touch ripple color from parent element's text color
.touch-ripple-black--k-touch-ripple-color: rgba(255, 255, 255, 0.15)Makes touch ripple black
.touch-ripple-white--k-touch-ripple-color: currentColorMakes touch ripple white
.touch-ripple-[color]--k-touch-ripple-color: rgba([color], 0.25)Makes touch ripple of specified color

For example:

<template>
  <!-- Makes button with red touch ripple -->
  <k-button class="touch-ripple-red-500">Click me</k-button>
</template>
<script>
  import { kButton } from 'konsta/vue';

  export default {
    components: {
      kButton,
    },
  };
</script>
Code licensed under MIT.
2025 © Konsta UI by nolimits4web.
PaneFlow - Create Stunning Slideshows Visually. No Code Requiredt0ggles - Your ultimate multiple projects management toolSwiper Studio - Create Beautiful And Responsive Sliders Without Writing Any CodeUI Initiative - Premium templates & plugins for Swiper and Framework7Start Page HQFisper - Local AI Voice Dictation for macOS