.landing-button {
    position: relative;
    width: 160px;
    height: 160px;
    background-color: #005028;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow-x:hidden;
    float: left;
    margin-right: 16px;
}

/* img + mask */
.landing-button > img {
    filter: brightness(0) invert(1);
    width: 120px;
    margin-bottom: 60px;
    z-index: 1;
}
.landing-button:hover > img {
    filter: none;
}
.landing-button > .landing-button-mask {
  background-color: #005028;
  width: 55%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  transition: right 0.5s ease-in-out;
  z-index: 2;
}
.landing-button:hover > .landing-button-mask {
    right: -100%;
}

/* text */
.landing-button > .inner-text {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-family: 'Avenir Next LT Regular';
    font-size: 20px;
    line-height: 1;
    color: #fff;
    z-index: 3;
}
.landing-button:hover > .inner-text {
    color: #F8EA45;
}