ИНТЕРЕСНЫЙ ХОВЕР ДЛЯ КНОПОК

by Denis Tverdokhlebov

HTML

<div class="button-container-1">
  <span class="mas">КУПИТЬ</span>
  <button id='work' type="button" name="Hover">КУПИТЬ</button>
</div>

<div class="button-container-2">
  <span class="mas">КУПИТЬ</span>
  <button type="button" name="Hover">КУПИТЬ</button>
</div>

<div class="button-container-3">
  <span class="mas">КУПИТЬ</span>
  <button type="button" name="Hover">КУПИТЬ</button>
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Lato:100,300,400");
@import url("https://fonts.googleapis.com/css?family=Roboto:100");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 34px;
  margin-top: 12vh;
}

.footer {
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin-top: 15vh;
}

.button-container-1 {
  position: relative;
  width: 100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6vh;
  overflow: hidden;
  border: 1px solid;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  transition: 0.5s;
  letter-spacing: 1px;
}

.button-container-1 button {
  width: 101%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 1px;
  background: #000;
  -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  -webkit-mask-size: 2300% 100%;
  mask-size: 2300% 100%;
  border: none;
  color: #fff;
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(22) forwards;
  animation: ani2 0.7s steps(22) forwards;
}

.button-container-1 button:hover {
  -webkit-animation: ani 0.7s steps(22) forwards;
  animation: ani 0.7s steps(22) forwards;
}

.button-container-2 {
  position: relative;
  width: 100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 7vh;
  overflow: hidden;
  border: 1px solid #000;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  transition: 0.5s;
  letter-spacing: 1px;
}

.button-container-2 button {
  width: 101%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 1px;
  background: #000;
  -webkit-mask:...