More lightweight function which creates CSS only ripple effect. For usage w/ JSS. Here ripple always starts from center of ripple container

css-ripple-2.ts

export function createRipple(color: string = '#ffffff80', duration: number = 1000) {
  const styles = {
    position: 'relative',
    overflow: 'hidden',
    transform: 'translate3d(0, 0, 0)',
    cursor: 'pointer',

    '&::after': {
      content: '""',
      display: 'block',
      position: 'absolute',
      width: '100%',
      height: '100%',
      top: 0,
      left: 0,
      pointerEvents: 'none',
      backgroundImage: `radial-gradient(circle, ${color} 10%, transparent 10.01%)`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: '50%',
      transform: 'scale(10, 10)',
      opacity: 0,
      transition: `transform ${duration / 2}ms, opacity ${duration}ms`,
    },

    '&:active::after': {
      transform: 'scale(0, 0)',
      opacity: 0.2,
      transition: '0s',
    },
  };

  return styles;
}