.outer {
  margin: 50px;
}

.button {
  border: 1px solid black;
  border-radius: 3px;
  width: 100px;
  height: 30px;
  display: block;

  background: linear-gradient(to right, black 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
}

.button:hover {
  background-position: left bottom;
}

.text {
  text-align: left;
  font-size: 16px;
  line-height: 30px; 
  color: black;
  transition: all .6s ease-out;
  display: block;
}

.text:hover {
  color: white;  
}

.divbutton {
    font: 16px Poppins;
    display: inline-block;
    padding: 0.5em 1em;
    text-align: center;
    color: #1a1c1c;
    background: transparent; /* 

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, #f6f4ef 50%, #1a1c1c 50%) right;
    background-size: 200%;
    transition: .3s ease-out;
}
.divbutton:hover {
    background-position: left;
}

.divbuttonoutputs {
    font: 16px Poppins;
    display: inline-block;
    padding: 0.5em 1em;
    text-align: center;
    color: #1a1c1c;
    background: transparent; /* 

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, #c7bda9 50%, #383a3a 50%) right;
    background-size: 200%;
    transition: .3s ease-out;
}
.divbuttonoutputs:hover {
    background-position: left;
}

.calltoaction {
    font: 16px Poppins;
    display: inline-block;
    padding: 0.5em 1em;
    text-align: center;
    color: #c7bda9;


    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, #1a1c1c 50%, #383a3a 50%) right;
    background-size: 200%;
    transition: .3s ease-out;
}
.calltoaction:hover {
    background-position: left;
}