CSS-Mask Button Hover Animation

CSS Mask Button Hover Animation | botón tipo mascara al pasar cursor y ademas con animación solo con CSS

BY Yugam


HTML

<div class="button-container-1"> <div class="button-container-1"> <span class="mas">HELLO</span> <button id='work' type="button" name="Hover">BUTTON 1</button> </div>
 <div class="button-container-2"> <span class="mas">ALOHA</span> <button type="button" name="Hover">BUTTON 2</button> </div>
 <div class="button-container-3"> <span class="mas">MEOW</span> <button type="button" name="Hover">BUTTON 3</button> </div>


CSS

.button-container-1{position:relative;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:.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 .7s steps(22) forwards;animation:ani2 .7s steps(22) forwards}
.button-container-1 button:hover{-webkit-animation:ani .7s steps(22) forwards;animation:ani .7s steps(22) forwards}
.button-container-2{position:relative;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:.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:url(https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png);mask:url(https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/urban-sprite.png);-webkit-mask-size:3000% 100%;mask-size:3000% 100%;border:none;color:#fff;cursor:pointer;-webkit-animation:ani2 .7s steps(29) forwards;animation:ani2 .7s steps(29) forwards}
.button-container-2 button:hover{-webkit-animation:ani .7s steps(29) forwards;animation:ani .7s steps(29) forwards}
.button-container-3{position:relative;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:.5s;letter-spacing:1px}
.button-container-3 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://github.com/robin-dela/css-mask-animation/blob/master/img/nature-sprite-2.png?raw=true);mask:url(https://github.com/robin-dela/css-mask-animation/blob/master/img/nature-sprite-2.png?raw=true);-webkit-mask-size:7100% 100%;mask-size:7100% 100%;border:none;color:#fff;cursor:pointer;-webkit-animation:ani2 .7s steps(70) forwards;animation:ani2 .7s steps(70) forwards}
.button-container-3 button:hover{-webkit-animation:ani .7s steps(70) forwards;animation:ani .7s steps(70) forwards}
.mas{color:#000;text-align:center;width:101%;font-family:Lato,sans-serif;font-weight:300;position:absolute;font-size:20px;margin: 15px auto;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}}
¿Te gusto el post?
¡Compártelo!