.liquid-btn {
  position: relative;
  z-index: 0;

  &::before {
    animation: waterEffect 5s linear infinite;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 45%;
    content: "";
    height: 400px;
    left: 50%;
    position: absolute;
    top: -80px;
    transform: translate(-50%, -75%);
    transition: 0.5s linear;
    width: 400px;
    z-index: -1;
  }

  &::after {
    animation: waterEffect 10s linear infinite;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 40%;
    content: "";
    height: 400px;
    left: 50%;
    position: absolute;
    top: -80px;
    transform: translate(-50%, -75%);
    transition: 0.5s linear;
    width: 400px;
    z-index: -1;
  }

  &:hover::before,
  &.animated::before {
    top: -120px;
  }

  &:hover::after,
  &.animated::after {
    top: -120px;
  }

  .liquidBtn(@color) {
    border-color: @color;
    color: #000 !important;
    .bc(@color);
  }

  &.blue-btn {
    .liquidBtn(@blue);
  }

  &.pink-btn {
    .liquidBtn(@pink);
  }

  &.green-btn {
    .liquidBtn(@green);
  }

  &.yellow-btn {
    .liquidBtn(@yellow);
    color: #fff;
  }

  &.orange-btn {
    .liquidBtn(@orange);
  }

  &.red-btn {
    .liquidBtn(@red);
  }

  &.purple-btn {
    .liquidBtn(@purple);
  }

  &.black-btn {
    .liquidBtn(@black);
    color: #fff !important;
  }

  &.white-btn {
    .liquidBtn(@white);
    border-color: rgba(0, 0, 0, 0.2);
    &::before {
      background-color: rgba(0, 0, 0, 0.5);
    }
    &::after {
      background-color: rgba(0, 0, 0, 0.2);
    }
  }
}

@keyframes waterEffect {
  0% {
    transform: translate(-50%, -75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -75%) rotate(360deg);
  }
}