.ripple{
  overflow:hidden;
  cursor:pointer;
}

.fab{
  border-radius: 50%;
  margin:0;
  padding: 20px;
}

.ripple-effect{
  position: absolute;
  width: 5px;
  height: 5px;
  background: white;
  animation: ripple-animation 0.25s;
  z-index:1000;
  pointer-events: none;
}


@keyframes ripple-animation {
    from {
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      transform: scale(20);
      opacity: 0;
    }
}

.ripple-effectdpi{
  position: absolute;
  border-radius:50%;
  width: 5px;
  height: 5px;
  background: white;
  animation: ripple-animationdpi 0.25s;
  z-index:1000;
  pointer-events: none;
}

@keyframes ripple-animationdpi {
    from {
      transform: scale(1);
      opacity: 0.4;
    }
    to {
      transform: scale(30);
      opacity: 0;
    }
}

.ripple-effectdpidepixed{
  position: absolute;
  width: 5px;
  height: 5px;
  background: white;
  animation: ripple-animationdpidepixed 0.2s;
  z-index:1000;
  pointer-events: none;
}

@keyframes ripple-animationdpidepixed {
    from {
      transform: scale(1);
      opacity: 0.2;
    }
    to {
      transform: scale(20);
      opacity: 0;
    }
}