Glitch link

Developer
Filipp
Size
2,936 Kb
Views
34,408
  1. Glitch link Previews
  2. Glitch link HTML Codes
  3. Glitch link CSS Codes

How do I make an glitch link?

Glitch hover effect. What is a glitch link? How do you make a glitch link? This script and codes were developed by Filipp on 21 August 2022, Sunday.

Glitch link Previews
IQ Test

Glitch link - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>glitch link</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #2B0059; color: #fff;
}
.glitch { font-size: 130px; line-height: 1; font-family: 'Poppins', sans-serif; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; text-decoration: none; color: #fff;
}
.glitch:before, .glitch:after { display: block; content: 'HOVER ME!'; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .8;
}
.glitch:after { color: #f0f; z-index: -2;
}
.glitch:before { color: #0ff; z-index: -1;
}
.glitch:hover:before { animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:hover:after { animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
@keyframes glitch { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px); } 40% { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px); } 60% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px); } 80% { -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); } to { -webkit-transform: translate(0); transform: translate(0); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body>
<a href="#" class="glitch">HOVER ME!</a>
</body>
</body>
</html>

Glitch link - Script Codes CSS Codes

body { background-color: #2B0059; color: #fff;
}
.glitch { font-size: 130px; line-height: 1; font-family: 'Poppins', sans-serif; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; text-decoration: none; color: #fff;
}
.glitch:before, .glitch:after { display: block; content: 'HOVER ME!'; position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .8;
}
.glitch:after { color: #f0f; z-index: -2;
}
.glitch:before { color: #0ff; z-index: -1;
}
.glitch:hover:before { animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:hover:after { animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}
@keyframes glitch { 0% { -webkit-transform: translate(0); transform: translate(0); } 20% { -webkit-transform: translate(-5px, 5px); transform: translate(-5px, 5px); } 40% { -webkit-transform: translate(-5px, -5px); transform: translate(-5px, -5px); } 60% { -webkit-transform: translate(5px, 5px); transform: translate(5px, 5px); } 80% { -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); } to { -webkit-transform: translate(0); transform: translate(0); }
}
Glitch link - Script Codes
Glitch link - Script Codes
Home Page Home
Developer Filipp
Username blossk
Uploaded August 21, 2022
Rating 3
Size 2,936 Kb
Views 34,408
Do you need developer help for Glitch link?

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!

Filipp (blossk) Script Codes
Name
Pagepilling.js
Corners,corners,corners...
Easy css-responsive slider
Tuk-tuk foundation based
A Pen by Filipp
Interactive shedule
Test
Milligram css framework
Bootstrap easel and old html
Touchtouchtouch
Create amazing love letters 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!