style.scss

.feedback__list {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 90px;
  box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  ul.feedback__menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    li.feedback__item {
      padding: 5px 10px;
      background-color: #fff;
      transition: 0.3s;
      a {
        display: flex;
        align-items: center;
        color: #000;
        text-decoration: none;
        .feedback__icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          img {
            filter: invert(100%) sepia(0%) saturate(7470%) hue-rotate(334deg)
              brightness(126%) contrast(93%);
            width: 20px;
            height: 20px;
          }
        }
        div.telegram {
          background-color: #1296c9;
        }
        div.messenger {
          background-color: #007ff7;
        }
        div.email {
          background-color: chocolate;
        }
        div.call {
          background-color: #009500;
        }
        div.sms {
          background-color: #d2aa27;
        }

        .feedback__text {
          margin-left: 20px;
          span.item__title {
            color: #008675;
            font-weight: 500;
            font-size: 16px;
          }
          span.item__link {
            color: #242424;
            font-weight: 300;
            font-size: 12px;
          }
        }
      }
    }
    li.feedback__item:hover {
      background-color: #ccc;
      transition: 0.3s;
    }
    li.mobileShow {
      display: none;
    }
  }
}

.feedback__button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: rgb(131, 58, 180);
  background: linear-gradient(
    90deg,
    rgba(131, 58, 180, 1) 0%,
    rgba(253, 29, 29, 1) 50%,
    rgba(252, 176, 69, 1) 100%
  );
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  box-shadow: 5px 5px 20px 0px rgba(131, 131, 131, 0.6);
  cursor: pointer;

  .feedback__magick {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    img {
      width: 22px;
      height: 22px;
      filter: invert(34%) sepia(73%) saturate(1055%) hue-rotate(137deg)
        brightness(94%) contrast(101%);
    }
  }
}

.show__feedback {
  display: block;
  right: 20px;
  bottom: 90px;
  animation-duration: 1s;
  animation-name: showList;
}

@keyframes showList {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}