.button-medium{
  transition: all 0.4s ease-in-out;
}

.effect-1,
.effect-2,
.effect-3,
.effect-4{
  position: relative;
  z-index: 0;
  overflow: hidden;
}  
.effect-1:after,
.effect-2:after,
.effect-3:after,
.effect-4:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.effect-1:after{
  top: auto;
  bottom: -100%;
  transition: bottom 0.4s ease-in-out;
}
.effect-1:hover:after {
  bottom: 0;
}
.effect-2:after{
  background: red;
  top: -50px;
  transition: top 0.4s ease-in-out;
}
.effect-2:hover:after {
  top: 0;
}
.effect-3:after{
  left: -100%;
  background: red;
  transition: left 0.4s ease-in-out;
}
.effect-3:hover:after{
  left: 0;
}
.effect-4:after{
  left: auto;
  right: -100%;
  background: red;
  transition: right 0.4s ease-in-out;
}
.effect-4:hover:after{
  right: 0;
}