help with css button hover

Hello! I was wondering if someone could help me with the hover on this custom button. Currently, when you hover over it, only the outline changes color. Does anyone know how to alter the css so that when you hover over the button the entire color of the button ( both the outline as well as the body ) changes on hover? Any input is appreciated :)

.livesite {
  margin-right: 10px !important;
  padding: 12px 40px;
  font-size: 10px;
  font-family: lato;
  letter-spacing: 1px;
  border-radius: 70px;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none !important;
  position: relative;
  background: #a87a34;
  color: #ffffff !important;
 -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.livesite:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #a87a34;
  border-radius: 50px;
  text-decoration: none;  
  position: relative;
}
.livesite:before {
  content: '';
  position: absolute;
  border: solid white 2px;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  opacity: 1;
}
.livesite:hover {
  background: #393939 !important;
}