Snake Button
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
width:100%;
height:100vh;;
background:linear-gradient(black,grey);
}
div{
color:#ff0490;
width:110px;
height:5vh;
position:relative;
top:200px;
left:550px;
line-height:4vh;
overflow:hidden;
border-radius:10px;
border:2px solid #ff0490;
background:#03e9f4;
text-shadow:2px 2px #03e9f4;
border:2px solid #03e9f4;
filter:drop-shadow(5px 5px 10px #03e9f4) drop-shadow(-5px -5px 10px #03e9f4);
}
span:nth-of-type(2){
left:5px;
height:2vh;
position:absolute;
border:1px solid #ccff00;
animation-name:snake;
animation-duration:1s;/*Takes 10sec to complete the animation*/
animation-delay:0s;/*starts after 2sec*/
animation-iteration-count:infinite; /*Now animation will not stop ever.It will repeat itself infinite times*/
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
animation-play-state:running;
animation-direction:alternate;
}
span:nth-of-type(3){
position: absolute;
border:1px solid #ccff00;
left:102px;
height:2vh;
animation-name:snake;
animation-duration:1s;/*Takes 10sec to complete the animation*/
animation-delay:0s;/*starts after 2sec*/
animation-iteration-count:infinite; /*Now animation will not stop ever.It will repeat itself infinite times*/
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
animation-play-state:running;
animation-direction:alternate;
}
span:nth-of-type(1){
display:block;
position: relative;
width:30px;
border:1px solid #ccff00;
animation-name:snake2;
animation-duration:1s;/*Takes 10sec to complete the animation*/
animation-iteration-count:infinite; /*Now animation will not stop ever.It will repeat itself infinite times*/
animation-fill-mode:forwards;
animation-timing-function:ease-in-out;
animation-play-state:running;
animation-direction:alternate-reverse;
}
span:nth-of-type(4){
display:block;
position:relative;
top:-2px;
width:30px;
border:1px solid #ccff00;
animation-name:snake2;
animation-duration:1s;/*Takes 10sec to complete the animation*/
animation-iteration-count:infinite; /*Now animation will not stop ever.It will repeat itself infinite times*/
animation-fill-mode:forwards;
animation-play-state:running;
animation-direction:alternate-reverse;
}
/* div:hover span:nth-child(2),div:hover span:nth-child(3){
visibility: visible;
height:2vh;
}*/
@keyframes snake{
0%{top:-30px}
100%{top:45px}}
@keyframes snake2{
0%{left:-40px;}
100%{left:120px;}
}
</style>
<title></title>
</head>
<body>
<div>
<span></span>
<span></span>
<center>FACEBOOK</center>
<span></span>
<span></span>
</div>
</body>
</html>
Comments
Post a Comment