#status{
  display: inline-block;
  position: relative;
  top: calc(50% - 5px);
  width: 10px;
  height: 10px;
  margin-left: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  z-index: 1;
}
#status:before{
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: live 2s ease-in-out infinite;
  z-index: -1;
}
/* live icon */
.live-icon {
  background-color: #08e708;
}

.live-icon:before {
  background-color: #08e708;
}

/* offline */
.offline-icon {
  background-color: red;
}

.offline-icon:before {
  background-color: red;
}

/* Away  */
.away-icon {
  background-color: orange;
}

.away-icon:before {
  background-color: orange;
}

@keyframes live {
  0% {
    transform: scale(1, 1);
  }

  100% {
    transform: scale(3.5, 3.5);
    background-color: rgba(255, 0, 0, 0);
  }
}

.btn_li {
  display: block;
  font-weight: 700;
  position: relative;
  padding: 13px 25px;
  margin: 0 1rem;
  background-color: #fff;
  text-decoration: none;
  color: #333;
  border-radius: 50px;
  border: 1px solid white;
  box-shadow: 0px 2px 0px #ff1053;
  transition: all 0.2s;
  z-index: 1;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  font-size: 16px;
}

.btn_li:hover {
  transform: translateY(-5px);
  padding: calc(13px * 1.2) calc(25px * 1.2);
  padding-right: 26.4px;
  background-color: white;
  border: none;
  box-shadow: 0px 5px 10px #ff1053;
}

.btn_li:hover>span:before {
  animation: none;
}

.btn_li:active {
  transform: translateY(0px);
  padding: calc(13px * 0.95) calc(25px * 0.95);
  box-shadow: inset 0px 2px 1px #02679e;
}