button {
  position: relative;
  padding: 13px 35px;
  background: #2e323c;
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  border: 3px solid #2e323c;
  border-radius: 8px;
  transition: all .3s ease-in-out;
}

p:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  transition: all .3s ease-in-out;
  z-index: -5;
}

p:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  transition: all .3s ease-in-out;
  z-index: -5;
}

p:nth-child(3) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  transition: all .3s ease-in-out;
  z-index: -5;
}

p:nth-child(4) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 17px;
  font-weight: 900;
  color: #FFF;
  transition: all .3s ease-in-out;
  z-index: -5;
}

button:hover {
  background: transparent;
  box-shadow: 0 0 15px #2e323c;
}

button:hover p:nth-child(1) {
  top: 0%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:hover p:nth-child(2) {
  top: -50%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:hover p:nth-child(3) {
  top: 100%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:hover p:nth-child(4) {
  top: 150%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:active p:nth-child(1) {
  top: -20%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:active p:nth-child(2) {
  top: -90%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:active p:nth-child(3) {
  top: 120%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}

button:active p:nth-child(4) {
  top: 190%;
  filter: drop-shadow(0 0 5px #FFFFFF);
  z-index: 1;
}