<div class="container">
  <div class="card lightbg transition">
    <div class="card-title">
      Hover to brighten up the place.
    </div>
    <div class="button-hover">
      <a class="button darkbg transition" href="#"><span>Buy now</span></a>
    </div>
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Yeseva+One|Roboto:400,300,100,500,700,900);

html {
  background-color: #efefef;
  font-family: 'Yeseva One';
}

body {
  height: 500px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.card {
  width: 470px;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  background-color: transparent;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
  
  &:hover {
    background-position: -100% 100%;
    color: #F9F158;
  }
  
  &:hover a.button {
    background-position: -100% 100%;
    color: White;
  }
  
  a.button {
    display: block;
    font: normal normal 100 1.5em 'Roboto';
    text-decoration: none;
    color: #d2d2d2;
    background-color: transparent;
    border-radius: 0 0 10px 10px;
    padding: 0.9em 0;
   
    }
  }


.card-title {
  padding: 30px;
  line-height: 1em;
  font-size: 4em;
  margin: 30px 0 30px 0;
}

.greybg {
  background-size: 200% 100%;
  background-image: linear-gradient(to right, transparent 50%, LightGrey 50%);
}

.darkbg {
  background-size: 200% 100%; 
  background-image: linear-gradient(to right, #1e1e1e 50%, #08689b 50%);
}

.lightbg {
  background-size: 200% 100%; 
  background-image: linear-gradient(to right, White 50%, #2eb0f4 50%);
}

.transition {
  transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, background-color .5s ease, color .2s ease 0s;
}

.button-hover a span {
  position: relative;
  display: block;
  transition: all 0.3s;
}

.button-hover a:hover span,
.button-hover a:focus span {
  transform: scale(1.2);
}