CSS-Mask Button Hover Animation ( Experimental )

css-mask-button-hover-animation-experimental.markdown

CSS-Mask Button Hover Animation ( Experimental )

Made this sprite animation on button with hover effect for triggering the frame's , inspired by this codrop article https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/

A Pen by Yugam on CodePen.

License.

index.html

  <div class="header">CSS-MASK BUTTON HOVER ANIMATION 
		( Experimental )</div>
    <div class="button-container-1">
      <span class="mas">MASK1</span>
    <button id='work' type="button" name="Hover">MASK1</button>
  </div>

  <div class="button-container-2">
    <span class="mas">MASK2</span>
  <button type="button" name="Hover">MASK2</button>
</div>

<div class="button-container-3">
  <span class="mas">MASK3</span>
<button type="button" name="Hover">MASK3</button>
</div>

<div class="footer">Inspired by <a href="https://tympanus.net/codrops/2016/09/29/transition-effect-with-css-masks/">this</a> codrops article</div>

style.scss

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css?family=Lato:100,300,400');
@import url('https://fonts.googleapis.com/css?family=Roboto:100');

@mixin button($bcolor,
$url,
$x1,
$y1,
$bor,
$col) {
 background: $bcolor;
 -webkit-mask: url($url);
 mask: url($url);
 -webkit-mask-size: $x1 $y1;
 mask-size: $x1 $y1;
 border: $bor;
 color: $col;
}

.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 {
  width: 101%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 1px;
  @include button(#000,
  "https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png",
  2300%,
  100%,
  none,
  #fff);
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(22) forwards;
  animation: ani2 0.7s steps(22) forwards;

  &: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 {
  width: 101%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 1px;

  @include button(#000,
  "https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png",
  3000%,
  100%,
  none,
  #fff);
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(29) forwards;
  animation: ani2 0.7s steps(29) forwards;

  &:hover {
   -webkit-animation: ani 0.7s steps(29) forwards;
   animation: ani 0.7s steps(29) forwards;
  }
 }
}

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

 button {
  width: 101%;
  height: 100%;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 1px;

  @include button(#000,
  "https://github.com/robin-dela/css-mask-animation/blob/master/img/nature-sprite-2.png?raw=true",
  7100%,
  100%,
  none,
  #fff);
  cursor: pointer;
  -webkit-animation: ani2 0.7s steps(70) forwards;
  animation: ani2 0.7s steps(70) forwards;

  &:hover {
   -webkit-animation: ani 0.7s steps(70) forwards;
   animation: ani 0.7s steps(70) forwards;
  }
 }
}

.mas {
 position: absolute;
 color: #000;
 text-align: center;
 width: 101%;
 font-family: 'Lato', sans-serif;
 font-weight: 300;
 position: absolute;
 font-size: 20px;
 margin-top: 12px;
 overflow: hidden;
}

@-webkit-keyframes ani {
 from {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
 }

 to {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
 }
}

@keyframes ani {
 from {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
 }

 to {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
 }
}

@-webkit-keyframes ani2 {
 from {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
 }

 to {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
 }
}

@keyframes ani2 {
 from {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
 }

 to {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
 }
}

a{
	color:#00ff95;
}