Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS-Mask Button Hover Animation ( Experimental )
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment