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/
<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> |
* { | |
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; | |
} |