jquery-waves/docs/css/jquery-waves.css

A simple waves effect library

@charset "UTF-8";
/*!
 * jquery-waves
 * https://github.com/isaeken/jquery-waves
 *
 * Copyright 2020 İsa Eken
 * Released under the MIT license
 * https://github.com/isaeken/jquery-waves/blob/master/LICENSE
 */
.waves-effect, .wave-effect {
  position: relative;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.waves-effect.waves-material .ie-waves-ripple, .wave-effect.waves-material .ie-waves-ripple {
  background: rgba(0, 0, 0, 0.2);
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}

.waves-effect.waves-light .ie-waves-ripple, .wave-effect.waves-light .ie-waves-ripple {
  background-color: rgba(255, 255, 255, 0.45);
}

.waves-effect.waves-light.waves-material .ie-waves-ripple, .wave-effect.waves-light.waves-material .ie-waves-ripple {
  background: rgba(255, 255, 255, 0.2);
  background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, black 70%);
  background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, black 70%);
  background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, black 70%);
  background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, black 70%);
}

.waves-effect.waves-red .ie-waves-ripple, .wave-effect.waves-red .ie-waves-ripple {
  background-color: rgba(244, 67, 54, 0.7);
}

.waves-effect.waves-red.waves-material .ie-waves-ripple, .wave-effect.waves-red.waves-material .ie-waves-ripple {
  background: rgba(244, 67, 54, 0.2);
  background: -webkit-radial-gradient(rgba(244, 67, 54, 0.2) 0, rgba(244, 67, 54, 0.3) 40%, rgba(244, 67, 54, 0.4) 50%, rgba(244, 67, 54, 0.5) 60%, #f44134 70%);
  background: -o-radial-gradient(rgba(244, 67, 54, 0.2) 0, rgba(244, 67, 54, 0.3) 40%, rgba(244, 67, 54, 0.4) 50%, rgba(244, 67, 54, 0.5) 60%, #f44134 70%);
  background: -moz-radial-gradient(rgba(244, 67, 54, 0.2) 0, rgba(244, 67, 54, 0.3) 40%, rgba(244, 67, 54, 0.4) 50%, rgba(244, 67, 54, 0.5) 60%, #f44134 70%);
  background: radial-gradient(rgba(244, 67, 54, 0.2) 0, rgba(244, 67, 54, 0.3) 40%, rgba(244, 67, 54, 0.4) 50%, rgba(244, 67, 54, 0.5) 60%, #f44134 70%);
}

.waves-effect.waves-yellow .ie-waves-ripple, .wave-effect.waves-yellow .ie-waves-ripple {
  background-color: rgba(255, 235, 59, 0.7);
}

.waves-effect.waves-yellow.waves-material .ie-waves-ripple, .wave-effect.waves-yellow.waves-material .ie-waves-ripple {
  background: rgba(255, 235, 59, 0.2);
  background: -webkit-radial-gradient(rgba(255, 235, 59, 0.2) 0, rgba(255, 235, 59, 0.3) 40%, rgba(255, 235, 59, 0.4) 50%, rgba(255, 235, 59, 0.5) 60%, #ffeb38 70%);
  background: -o-radial-gradient(rgba(255, 235, 59, 0.2) 0, rgba(255, 235, 59, 0.3) 40%, rgba(255, 235, 59, 0.4) 50%, rgba(255, 235, 59, 0.5) 60%, #ffeb38 70%);
  background: -moz-radial-gradient(rgba(255, 235, 59, 0.2) 0, rgba(255, 235, 59, 0.3) 40%, rgba(255, 235, 59, 0.4) 50%, rgba(255, 235, 59, 0.5) 60%, #ffeb38 70%);
  background: radial-gradient(rgba(255, 235, 59, 0.2) 0, rgba(255, 235, 59, 0.3) 40%, rgba(255, 235, 59, 0.4) 50%, rgba(255, 235, 59, 0.5) 60%, #ffeb38 70%);
}

.waves-effect.waves-orange .ie-waves-ripple, .wave-effect.waves-orange .ie-waves-ripple {
  background-color: rgba(255, 152, 0, 0.7);
}

.waves-effect.waves-orange.waves-material .ie-waves-ripple, .wave-effect.waves-orange.waves-material .ie-waves-ripple {
  background: rgba(255, 152, 0, 0.2);
  background: -webkit-radial-gradient(rgba(255, 152, 0, 0.2) 0, rgba(255, 152, 0, 0.3) 40%, rgba(255, 152, 0, 0.4) 50%, rgba(255, 152, 0, 0.5) 60%, #fc9600 70%);
  background: -o-radial-gradient(rgba(255, 152, 0, 0.2) 0, rgba(255, 152, 0, 0.3) 40%, rgba(255, 152, 0, 0.4) 50%, rgba(255, 152, 0, 0.5) 60%, #fc9600 70%);
  background: -moz-radial-gradient(rgba(255, 152, 0, 0.2) 0, rgba(255, 152, 0, 0.3) 40%, rgba(255, 152, 0, 0.4) 50%, rgba(255, 152, 0, 0.5) 60%, #fc9600 70%);
  background: radial-gradient(rgba(255, 152, 0, 0.2) 0, rgba(255, 152, 0, 0.3) 40%, rgba(255, 152, 0, 0.4) 50%, rgba(255, 152, 0, 0.5) 60%, #fc9600 70%);
}

.waves-effect.waves-purple .ie-waves-ripple, .wave-effect.waves-purple .ie-waves-ripple {
  background-color: rgba(156, 39, 176, 0.7);
}

.waves-effect.waves-purple.waves-material .ie-waves-ripple, .wave-effect.waves-purple.waves-material .ie-waves-ripple {
  background: rgba(156, 39, 176, 0.2);
  background: -webkit-radial-gradient(rgba(156, 39, 176, 0.2) 0, rgba(156, 39, 176, 0.3) 40%, rgba(156, 39, 176, 0.4) 50%, rgba(156, 39, 176, 0.5) 60%, #9a27ae 70%);
  background: -o-radial-gradient(rgba(156, 39, 176, 0.2) 0, rgba(156, 39, 176, 0.3) 40%, rgba(156, 39, 176, 0.4) 50%, rgba(156, 39, 176, 0.5) 60%, #9a27ae 70%);
  background: -moz-radial-gradient(rgba(156, 39, 176, 0.2) 0, rgba(156, 39, 176, 0.3) 40%, rgba(156, 39, 176, 0.4) 50%, rgba(156, 39, 176, 0.5) 60%, #9a27ae 70%);
  background: radial-gradient(rgba(156, 39, 176, 0.2) 0, rgba(156, 39, 176, 0.3) 40%, rgba(156, 39, 176, 0.4) 50%, rgba(156, 39, 176, 0.5) 60%, #9a27ae 70%);
}

.waves-effect.waves-green .ie-waves-ripple, .wave-effect.waves-green .ie-waves-ripple {
  background-color: rgba(76, 175, 80, 0.7);
}

.waves-effect.waves-green.waves-material .ie-waves-ripple, .wave-effect.waves-green.waves-material .ie-waves-ripple {
  background: rgba(76, 175, 80, 0.2);
  background: -webkit-radial-gradient(rgba(76, 175, 80, 0.2) 0, rgba(76, 175, 80, 0.3) 40%, rgba(76, 175, 80, 0.4) 50%, rgba(76, 175, 80, 0.5) 60%, #4bad4f 70%);
  background: -o-radial-gradient(rgba(76, 175, 80, 0.2) 0, rgba(76, 175, 80, 0.3) 40%, rgba(76, 175, 80, 0.4) 50%, rgba(76, 175, 80, 0.5) 60%, #4bad4f 70%);
  background: -moz-radial-gradient(rgba(76, 175, 80, 0.2) 0, rgba(76, 175, 80, 0.3) 40%, rgba(76, 175, 80, 0.4) 50%, rgba(76, 175, 80, 0.5) 60%, #4bad4f 70%);
  background: radial-gradient(rgba(76, 175, 80, 0.2) 0, rgba(76, 175, 80, 0.3) 40%, rgba(76, 175, 80, 0.4) 50%, rgba(76, 175, 80, 0.5) 60%, #4bad4f 70%);
}

.waves-effect.waves-teal .ie-waves-ripple, .wave-effect.waves-teal .ie-waves-ripple {
  background-color: rgba(0, 150, 136, 0.7);
}

.waves-effect.waves-teal.waves-material .ie-waves-ripple, .wave-effect.waves-teal.waves-material .ie-waves-ripple {
  background: rgba(0, 150, 136, 0.2);
  background: -webkit-radial-gradient(rgba(0, 150, 136, 0.2) 0, rgba(0, 150, 136, 0.3) 40%, rgba(0, 150, 136, 0.4) 50%, rgba(0, 150, 136, 0.5) 60%, #009386 70%);
  background: -o-radial-gradient(rgba(0, 150, 136, 0.2) 0, rgba(0, 150, 136, 0.3) 40%, rgba(0, 150, 136, 0.4) 50%, rgba(0, 150, 136, 0.5) 60%, #009386 70%);
  background: -moz-radial-gradient(rgba(0, 150, 136, 0.2) 0, rgba(0, 150, 136, 0.3) 40%, rgba(0, 150, 136, 0.4) 50%, rgba(0, 150, 136, 0.5) 60%, #009386 70%);
  background: radial-gradient(rgba(0, 150, 136, 0.2) 0, rgba(0, 150, 136, 0.3) 40%, rgba(0, 150, 136, 0.4) 50%, rgba(0, 150, 136, 0.5) 60%, #009386 70%);
}

.ie-waves-ripple {
  position: absolute;
  pointer-events: none;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}