.boton {
  width: 150px;
  height: 50px;
  border-radius: 5px;
  border: none;
  transition: all 0.5s ease-in-out;
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  background: #040f16;
  color: #f5f5f5;
}

.hover-activo {
  box-shadow: 0 0 20px 0px #2e2e2e3a;
}

.boton .icono {
  position: absolute;
  height: 40px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}

.boton .texto {
  transform: translateX(55px);
}

.hover-activo .icono {
  width: 175px;
}

.hover-activo .texto {
  transition: all 0.5s;
  opacity: 0;
}

.boton:focus {
  outline: none;
}

.boton:active .icono {
  transform: scale(0.85);
}