Cryptaris Glitch Button

Developer
Josh Beckwith
Size
4,648 Kb
Views
42,504
  1. Cryptaris Glitch Button Previews
  2. Cryptaris Glitch Button HTML Codes
  3. Cryptaris Glitch Button CSS Codes

How do I make an cryptaris glitch button?

Glitch button hover used on http://cryptarismission.com. What is a cryptaris glitch button? How do you make a cryptaris glitch button? This script and codes were developed by Josh Beckwith on 29 August 2022, Monday.

Cryptaris Glitch Button Previews
IQ Test

Cryptaris Glitch Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cryptaris Glitch Button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="glitch-btn" href="http://cryptarismission.com" target="_blank"> <div class="label">cryptaris</div> <div class="mask"><span>cryptaris</span></div> <div class="mask"><span>cryptaris</span></div> <div class="mask"><span>cryptaris</span></div> <div class="mask"><span>cryptaris</span></div> <div class="mask"><span>cryptaris</span></div></a>
</body>
</html>

Cryptaris Glitch Button - Script Codes CSS Codes

@-webkit-keyframes jitter-20-20-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(0.45px, -0.15px); transform: translate(0.45px, -0.15px); } 90% { -webkit-transform: translate(-0.4px, 0px); transform: translate(-0.4px, 0px); } 85% { -webkit-transform: translate(0.75px, 0.45px); transform: translate(0.75px, 0.45px); } 80% { -webkit-transform: translate(-0.4px, 0.2px); transform: translate(-0.4px, 0.2px); } 75% { -webkit-transform: translate(-0.5px, 1px); transform: translate(-0.5px, 1px); } 70% { -webkit-transform: translate(-2.4px, 1.2px); transform: translate(-2.4px, 1.2px); } 65% { -webkit-transform: translate(3.5px, 0.7px); transform: translate(3.5px, 0.7px); } 60% { -webkit-transform: translate(0.8px, 1.2px); transform: translate(0.8px, 1.2px); } 55% { -webkit-transform: translate(-1.8px, -0.9px); transform: translate(-1.8px, -0.9px); } 50% { -webkit-transform: translate(-1.5px, -0.5px); transform: translate(-1.5px, -0.5px); } 45% { -webkit-transform: translate(-0.55px, 0.55px); transform: translate(-0.55px, 0.55px); } 40% { -webkit-transform: translate(-5.4px, 0px); transform: translate(-5.4px, 0px); } 35% { -webkit-transform: translate(5.85px, 2.6px); transform: translate(5.85px, 2.6px); } 30% { -webkit-transform: translate(-3.5px, 0px); transform: translate(-3.5px, 0px); } 25% { -webkit-transform: translate(3px, 0px); transform: translate(3px, 0px); } 20% { -webkit-transform: translate(8px, 3.2px); transform: translate(8px, 3.2px); } 15% { -webkit-transform: translate(2.55px, -1.7px); transform: translate(2.55px, -1.7px); } 10% { -webkit-transform: translate(-5.4px, 1.8px); transform: translate(-5.4px, 1.8px); } 5% { -webkit-transform: translate(-6.65px, -1.9px); transform: translate(-6.65px, -1.9px); }
}
@keyframes jitter-20-20-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(0.45px, -0.15px); transform: translate(0.45px, -0.15px); } 90% { -webkit-transform: translate(-0.4px, 0px); transform: translate(-0.4px, 0px); } 85% { -webkit-transform: translate(0.75px, 0.45px); transform: translate(0.75px, 0.45px); } 80% { -webkit-transform: translate(-0.4px, 0.2px); transform: translate(-0.4px, 0.2px); } 75% { -webkit-transform: translate(-0.5px, 1px); transform: translate(-0.5px, 1px); } 70% { -webkit-transform: translate(-2.4px, 1.2px); transform: translate(-2.4px, 1.2px); } 65% { -webkit-transform: translate(3.5px, 0.7px); transform: translate(3.5px, 0.7px); } 60% { -webkit-transform: translate(0.8px, 1.2px); transform: translate(0.8px, 1.2px); } 55% { -webkit-transform: translate(-1.8px, -0.9px); transform: translate(-1.8px, -0.9px); } 50% { -webkit-transform: translate(-1.5px, -0.5px); transform: translate(-1.5px, -0.5px); } 45% { -webkit-transform: translate(-0.55px, 0.55px); transform: translate(-0.55px, 0.55px); } 40% { -webkit-transform: translate(-5.4px, 0px); transform: translate(-5.4px, 0px); } 35% { -webkit-transform: translate(5.85px, 2.6px); transform: translate(5.85px, 2.6px); } 30% { -webkit-transform: translate(-3.5px, 0px); transform: translate(-3.5px, 0px); } 25% { -webkit-transform: translate(3px, 0px); transform: translate(3px, 0px); } 20% { -webkit-transform: translate(8px, 3.2px); transform: translate(8px, 3.2px); } 15% { -webkit-transform: translate(2.55px, -1.7px); transform: translate(2.55px, -1.7px); } 10% { -webkit-transform: translate(-5.4px, 1.8px); transform: translate(-5.4px, 1.8px); } 5% { -webkit-transform: translate(-6.65px, -1.9px); transform: translate(-6.65px, -1.9px); }
}
@-webkit-keyframes jitter-20-21-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(0.075px, 0.1px); transform: translate(0.075px, 0.1px); } 90% { -webkit-transform: translate(0.55px, -0.2px); transform: translate(0.55px, -0.2px); } 85% { -webkit-transform: translate(1.125px, 0.15px); transform: translate(1.125px, 0.15px); } 80% { -webkit-transform: translate(-1.5px, 0.8px); transform: translate(-1.5px, 0.8px); } 75% { -webkit-transform: translate(0.375px, 0.25px); transform: translate(0.375px, 0.25px); } 70% { -webkit-transform: translate(2.25px, 0px); transform: translate(2.25px, 0px); } 65% { -webkit-transform: translate(-1.225px, -0.35px); transform: translate(-1.225px, -0.35px); } 60% { -webkit-transform: translate(4.2px, 1.2px); transform: translate(4.2px, 1.2px); } 55% { -webkit-transform: translate(-0.225px, 1.8px); transform: translate(-0.225px, 1.8px); } 50% { -webkit-transform: translate(3.25px, 1px); transform: translate(3.25px, 1px); } 45% { -webkit-transform: translate(0.275px, -1.1px); transform: translate(0.275px, -1.1px); } 40% { -webkit-transform: translate(5.7px, -1.8px); transform: translate(5.7px, -1.8px); } 35% { -webkit-transform: translate(-2.275px, -1.95px); transform: translate(-2.275px, -1.95px); } 30% { -webkit-transform: translate(6.65px, -0.7px); transform: translate(6.65px, -0.7px); } 25% { -webkit-transform: translate(5.625px, 0.75px); transform: translate(5.625px, 0.75px); } 20% { -webkit-transform: translate(-3.6px, 0px); transform: translate(-3.6px, 0px); } 15% { -webkit-transform: translate(-7.225px, 2.55px); transform: translate(-7.225px, 2.55px); } 10% { -webkit-transform: translate(-8.55px, 1.8px); transform: translate(-8.55px, 1.8px); } 5% { -webkit-transform: translate(9.025px, -2.85px); transform: translate(9.025px, -2.85px); }
}
@keyframes jitter-20-21-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(0.075px, 0.1px); transform: translate(0.075px, 0.1px); } 90% { -webkit-transform: translate(0.55px, -0.2px); transform: translate(0.55px, -0.2px); } 85% { -webkit-transform: translate(1.125px, 0.15px); transform: translate(1.125px, 0.15px); } 80% { -webkit-transform: translate(-1.5px, 0.8px); transform: translate(-1.5px, 0.8px); } 75% { -webkit-transform: translate(0.375px, 0.25px); transform: translate(0.375px, 0.25px); } 70% { -webkit-transform: translate(2.25px, 0px); transform: translate(2.25px, 0px); } 65% { -webkit-transform: translate(-1.225px, -0.35px); transform: translate(-1.225px, -0.35px); } 60% { -webkit-transform: translate(4.2px, 1.2px); transform: translate(4.2px, 1.2px); } 55% { -webkit-transform: translate(-0.225px, 1.8px); transform: translate(-0.225px, 1.8px); } 50% { -webkit-transform: translate(3.25px, 1px); transform: translate(3.25px, 1px); } 45% { -webkit-transform: translate(0.275px, -1.1px); transform: translate(0.275px, -1.1px); } 40% { -webkit-transform: translate(5.7px, -1.8px); transform: translate(5.7px, -1.8px); } 35% { -webkit-transform: translate(-2.275px, -1.95px); transform: translate(-2.275px, -1.95px); } 30% { -webkit-transform: translate(6.65px, -0.7px); transform: translate(6.65px, -0.7px); } 25% { -webkit-transform: translate(5.625px, 0.75px); transform: translate(5.625px, 0.75px); } 20% { -webkit-transform: translate(-3.6px, 0px); transform: translate(-3.6px, 0px); } 15% { -webkit-transform: translate(-7.225px, 2.55px); transform: translate(-7.225px, 2.55px); } 10% { -webkit-transform: translate(-8.55px, 1.8px); transform: translate(-8.55px, 1.8px); } 5% { -webkit-transform: translate(9.025px, -2.85px); transform: translate(9.025px, -2.85px); }
}
@-webkit-keyframes jitter-20-22-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(-0.4px, -0.1px); transform: translate(-0.4px, -0.1px); } 90% { -webkit-transform: translate(0px, 0.4px); transform: translate(0px, 0.4px); } 85% { -webkit-transform: translate(-0.15px, 0px); transform: translate(-0.15px, 0px); } 80% { -webkit-transform: translate(1.2px, -0.4px); transform: translate(1.2px, -0.4px); } 75% { -webkit-transform: translate(-2.25px, 0px); transform: translate(-2.25px, 0px); } 70% { -webkit-transform: translate(-0.3px, -0.3px); transform: translate(-0.3px, -0.3px); } 65% { -webkit-transform: translate(3.15px, 0.35px); transform: translate(3.15px, 0.35px); } 60% { -webkit-transform: translate(-2.8px, -0.4px); transform: translate(-2.8px, -0.4px); } 55% { -webkit-transform: translate(-2.7px, 0.9px); transform: translate(-2.7px, 0.9px); } 50% { -webkit-transform: translate(-4.5px, -1px); transform: translate(-4.5px, -1px); } 45% { -webkit-transform: translate(-5.5px, -1.1px); transform: translate(-5.5px, -1.1px); } 40% { -webkit-transform: translate(6.6px, -1.2px); transform: translate(6.6px, -1.2px); } 35% { -webkit-transform: translate(-0.65px, -0.65px); transform: translate(-0.65px, -0.65px); } 30% { -webkit-transform: translate(-0.7px, 0.7px); transform: translate(-0.7px, 0.7px); } 25% { -webkit-transform: translate(3.75px, -0.75px); transform: translate(3.75px, -0.75px); } 20% { -webkit-transform: translate(8px, 3.2px); transform: translate(8px, 3.2px); } 15% { -webkit-transform: translate(0.85px, 1.7px); transform: translate(0.85px, 1.7px); } 10% { -webkit-transform: translate(-6.3px, 1.8px); transform: translate(-6.3px, 1.8px); } 5% { -webkit-transform: translate(-0.95px, 1.9px); transform: translate(-0.95px, 1.9px); }
}
@keyframes jitter-20-22-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(-0.4px, -0.1px); transform: translate(-0.4px, -0.1px); } 90% { -webkit-transform: translate(0px, 0.4px); transform: translate(0px, 0.4px); } 85% { -webkit-transform: translate(-0.15px, 0px); transform: translate(-0.15px, 0px); } 80% { -webkit-transform: translate(1.2px, -0.4px); transform: translate(1.2px, -0.4px); } 75% { -webkit-transform: translate(-2.25px, 0px); transform: translate(-2.25px, 0px); } 70% { -webkit-transform: translate(-0.3px, -0.3px); transform: translate(-0.3px, -0.3px); } 65% { -webkit-transform: translate(3.15px, 0.35px); transform: translate(3.15px, 0.35px); } 60% { -webkit-transform: translate(-2.8px, -0.4px); transform: translate(-2.8px, -0.4px); } 55% { -webkit-transform: translate(-2.7px, 0.9px); transform: translate(-2.7px, 0.9px); } 50% { -webkit-transform: translate(-4.5px, -1px); transform: translate(-4.5px, -1px); } 45% { -webkit-transform: translate(-5.5px, -1.1px); transform: translate(-5.5px, -1.1px); } 40% { -webkit-transform: translate(6.6px, -1.2px); transform: translate(6.6px, -1.2px); } 35% { -webkit-transform: translate(-0.65px, -0.65px); transform: translate(-0.65px, -0.65px); } 30% { -webkit-transform: translate(-0.7px, 0.7px); transform: translate(-0.7px, 0.7px); } 25% { -webkit-transform: translate(3.75px, -0.75px); transform: translate(3.75px, -0.75px); } 20% { -webkit-transform: translate(8px, 3.2px); transform: translate(8px, 3.2px); } 15% { -webkit-transform: translate(0.85px, 1.7px); transform: translate(0.85px, 1.7px); } 10% { -webkit-transform: translate(-6.3px, 1.8px); transform: translate(-6.3px, 1.8px); } 5% { -webkit-transform: translate(-0.95px, 1.9px); transform: translate(-0.95px, 1.9px); }
}
@-webkit-keyframes jitter-20-23-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(0.225px, -0.05px); transform: translate(0.225px, -0.05px); } 90% { -webkit-transform: translate(0.75px, 0.1px); transform: translate(0.75px, 0.1px); } 85% { -webkit-transform: translate(-1.425px, 0.15px); transform: translate(-1.425px, 0.15px); } 80% { -webkit-transform: translate(2.3px, 0.4px); transform: translate(2.3px, 0.4px); } 75% { -webkit-transform: translate(-2.375px, 1px); transform: translate(-2.375px, 1px); } 70% { -webkit-transform: translate(-1.35px, 0.3px); transform: translate(-1.35px, 0.3px); } 65% { -webkit-transform: translate(-2.975px, 0.35px); transform: translate(-2.975px, 0.35px); } 60% { -webkit-transform: translate(-0.6px, -0.4px); transform: translate(-0.6px, -0.4px); } 55% { -webkit-transform: translate(-1.125px, 0.9px); transform: translate(-1.125px, 0.9px); } 50% { -webkit-transform: translate(1.75px, -1px); transform: translate(1.75px, -1px); } 45% { -webkit-transform: translate(-5.225px, -1.65px); transform: translate(-5.225px, -1.65px); } 40% { -webkit-transform: translate(2.7px, -0.6px); transform: translate(2.7px, -0.6px); } 35% { -webkit-transform: translate(2.925px, -0.65px); transform: translate(2.925px, -0.65px); } 30% { -webkit-transform: translate(-6.65px, 0.7px); transform: translate(-6.65px, 0.7px); } 25% { -webkit-transform: translate(-5.625px, 1.5px); transform: translate(-5.625px, 1.5px); } 20% { -webkit-transform: translate(2px, 2.4px); transform: translate(2px, 2.4px); } 15% { -webkit-transform: translate(-2.975px, 2.55px); transform: translate(-2.975px, 2.55px); } 10% { -webkit-transform: translate(-5.85px, -1.8px); transform: translate(-5.85px, -1.8px); } 5% { -webkit-transform: translate(10.925px, 1.9px); transform: translate(10.925px, 1.9px); }
}
@keyframes jitter-20-23-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(0.225px, -0.05px); transform: translate(0.225px, -0.05px); } 90% { -webkit-transform: translate(0.75px, 0.1px); transform: translate(0.75px, 0.1px); } 85% { -webkit-transform: translate(-1.425px, 0.15px); transform: translate(-1.425px, 0.15px); } 80% { -webkit-transform: translate(2.3px, 0.4px); transform: translate(2.3px, 0.4px); } 75% { -webkit-transform: translate(-2.375px, 1px); transform: translate(-2.375px, 1px); } 70% { -webkit-transform: translate(-1.35px, 0.3px); transform: translate(-1.35px, 0.3px); } 65% { -webkit-transform: translate(-2.975px, 0.35px); transform: translate(-2.975px, 0.35px); } 60% { -webkit-transform: translate(-0.6px, -0.4px); transform: translate(-0.6px, -0.4px); } 55% { -webkit-transform: translate(-1.125px, 0.9px); transform: translate(-1.125px, 0.9px); } 50% { -webkit-transform: translate(1.75px, -1px); transform: translate(1.75px, -1px); } 45% { -webkit-transform: translate(-5.225px, -1.65px); transform: translate(-5.225px, -1.65px); } 40% { -webkit-transform: translate(2.7px, -0.6px); transform: translate(2.7px, -0.6px); } 35% { -webkit-transform: translate(2.925px, -0.65px); transform: translate(2.925px, -0.65px); } 30% { -webkit-transform: translate(-6.65px, 0.7px); transform: translate(-6.65px, 0.7px); } 25% { -webkit-transform: translate(-5.625px, 1.5px); transform: translate(-5.625px, 1.5px); } 20% { -webkit-transform: translate(2px, 2.4px); transform: translate(2px, 2.4px); } 15% { -webkit-transform: translate(-2.975px, 2.55px); transform: translate(-2.975px, 2.55px); } 10% { -webkit-transform: translate(-5.85px, -1.8px); transform: translate(-5.85px, -1.8px); } 5% { -webkit-transform: translate(10.925px, 1.9px); transform: translate(10.925px, 1.9px); }
}
@-webkit-keyframes jitter-20-24-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(0.05px, 0.05px); transform: translate(0.05px, 0.05px); } 90% { -webkit-transform: translate(-0.7px, 0.4px); transform: translate(-0.7px, 0.4px); } 85% { -webkit-transform: translate(0.6px, 0.3px); transform: translate(0.6px, 0.3px); } 80% { -webkit-transform: translate(2px, -0.4px); transform: translate(2px, -0.4px); } 75% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 70% { -webkit-transform: translate(3.6px, -0.9px); transform: translate(3.6px, -0.9px); } 65% { -webkit-transform: translate(-3.15px, -1.05px); transform: translate(-3.15px, -1.05px); } 60% { -webkit-transform: translate(4px, 1.6px); transform: translate(4px, 1.6px); } 55% { -webkit-transform: translate(5.4px, 1.35px); transform: translate(5.4px, 1.35px); } 50% { -webkit-transform: translate(-5px, 2px); transform: translate(-5px, 2px); } 45% { -webkit-transform: translate(-1.1px, -1.65px); transform: translate(-1.1px, -1.65px); } 40% { -webkit-transform: translate(6px, 1.8px); transform: translate(6px, 1.8px); } 35% { -webkit-transform: translate(1.95px, 1.3px); transform: translate(1.95px, 1.3px); } 30% { -webkit-transform: translate(7px, 1.4px); transform: translate(7px, 1.4px); } 25% { -webkit-transform: translate(4.5px, -2.25px); transform: translate(4.5px, -2.25px); } 20% { -webkit-transform: translate(3.2px, 1.6px); transform: translate(3.2px, 1.6px); } 15% { -webkit-transform: translate(-0.85px, -2.55px); transform: translate(-0.85px, -2.55px); } 10% { -webkit-transform: translate(10.8px, -0.9px); transform: translate(10.8px, -0.9px); } 5% { -webkit-transform: translate(-1.9px, 1.9px); transform: translate(-1.9px, 1.9px); }
}
@keyframes jitter-20-24-8 { 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 95% { -webkit-transform: translate(0.05px, 0.05px); transform: translate(0.05px, 0.05px); } 90% { -webkit-transform: translate(-0.7px, 0.4px); transform: translate(-0.7px, 0.4px); } 85% { -webkit-transform: translate(0.6px, 0.3px); transform: translate(0.6px, 0.3px); } 80% { -webkit-transform: translate(2px, -0.4px); transform: translate(2px, -0.4px); } 75% { -webkit-transform: translate(2px, 1px); transform: translate(2px, 1px); } 70% { -webkit-transform: translate(3.6px, -0.9px); transform: translate(3.6px, -0.9px); } 65% { -webkit-transform: translate(-3.15px, -1.05px); transform: translate(-3.15px, -1.05px); } 60% { -webkit-transform: translate(4px, 1.6px); transform: translate(4px, 1.6px); } 55% { -webkit-transform: translate(5.4px, 1.35px); transform: translate(5.4px, 1.35px); } 50% { -webkit-transform: translate(-5px, 2px); transform: translate(-5px, 2px); } 45% { -webkit-transform: translate(-1.1px, -1.65px); transform: translate(-1.1px, -1.65px); } 40% { -webkit-transform: translate(6px, 1.8px); transform: translate(6px, 1.8px); } 35% { -webkit-transform: translate(1.95px, 1.3px); transform: translate(1.95px, 1.3px); } 30% { -webkit-transform: translate(7px, 1.4px); transform: translate(7px, 1.4px); } 25% { -webkit-transform: translate(4.5px, -2.25px); transform: translate(4.5px, -2.25px); } 20% { -webkit-transform: translate(3.2px, 1.6px); transform: translate(3.2px, 1.6px); } 15% { -webkit-transform: translate(-0.85px, -2.55px); transform: translate(-0.85px, -2.55px); } 10% { -webkit-transform: translate(10.8px, -0.9px); transform: translate(10.8px, -0.9px); } 5% { -webkit-transform: translate(-1.9px, 1.9px); transform: translate(-1.9px, 1.9px); }
}
@-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; }
}
body { background-color: #111;
}
a { text-decoration: none; color: white;
}
.glitch-btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 36px; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; z-index: 1; -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.glitch-btn:hover { color: black;
}
.glitch-btn:hover:before { background: white; -webkit-transform: translateY(-50%) scaleY(1.5); transform: translateY(-50%) scaleY(1.5);
}
.glitch-btn:before { content: ''; position: absolute; top: 50%; left: -18px; background: rgba(255, 255, 255, 0.1); width: 100%; height: 80%; padding: 0 15px; z-index: -1; -webkit-transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1); transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.glitch-btn:after { content: ''; position: absolute; top: 50%; left: -18px; background: transparent; width: 100%; height: 100%; padding: 0 15px;
}
.glitch-btn .mask { position: absolute; -webkit-backface-visibility: hidden; height: 20%; width: 100%; overflow: hidden; display: none;
}
.glitch-btn .mask span { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%;
}
.glitch-btn .mask:nth-child(6) { top: 100%;
}
.glitch-btn .mask:nth-child(6) span { top: -500%;
}
.glitch-btn .mask:nth-child(5) { top: 80%;
}
.glitch-btn .mask:nth-child(5) span { top: -400%;
}
.glitch-btn .mask:nth-child(4) { top: 60%;
}
.glitch-btn .mask:nth-child(4) span { top: -300%;
}
.glitch-btn .mask:nth-child(3) { top: 40%;
}
.glitch-btn .mask:nth-child(3) span { top: -200%;
}
.glitch-btn .mask:nth-child(2) { top: 20%;
}
.glitch-btn .mask:nth-child(2) span { top: -100%;
}
.glitch-btn:hover .label { -webkit-animation: fade-in 0.8s both; animation: fade-in 0.8s both;
}
.glitch-btn:hover .mask { display: block;
}
.glitch-btn:hover .mask:nth-child(6) { -webkit-animation: jitter-20-25-8 0.3s both; animation: jitter-20-25-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(5) { -webkit-animation: jitter-20-24-8 0.3s both; animation: jitter-20-24-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(4) { -webkit-animation: jitter-20-23-8 0.3s both; animation: jitter-20-23-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(3) { -webkit-animation: jitter-20-22-8 0.3s both; animation: jitter-20-22-8 0.3s both;
}
.glitch-btn:hover .mask:nth-child(2) { -webkit-animation: jitter-20-21-8 0.3s both; animation: jitter-20-21-8 0.3s both;
}
Cryptaris Glitch Button - Script Codes
Cryptaris Glitch Button - Script Codes
Home Page Home
Developer Josh Beckwith
Username positlabs
Uploaded August 29, 2022
Rating 4
Size 4,648 Kb
Views 42,504
Do you need developer help for Cryptaris Glitch Button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josh Beckwith (positlabs) Script Codes
Name
ES6 Model
Hootsuite Button Demo
Spherical orbiter
Emoji Split
Temporalis
Punch Button
Refraction image reveal
Emoji Split with spliddit
Fly Eye CSS
Three orbiter
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!