Với CSS ta có thể tạo ra hiệu ứng giọt nước khi click vào button. Giờ đây, không cần dùng thư viện Jquery nữa nhé.

Ta tạo html button với class như sau

class="btn ripple"

Đây là đoạn code css

.btn {
  background-color: orange;
  color: #fff;
  font-size: 40px;
  padding: 20px 20px;
}

/*ripple effect*/
.ripple {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.ripple:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform .5s, opacity 1s;
}

.ripple:active:after {
  transform: scale(0, 0);
  opacity: .3;
  transition: 0s;
}

Đơn giản vậy thôi.

Bạn có thể xem full code tại đây.