Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Glitch effect in CSS
<h1>Glitch effect in CSS</h1>
<div class="table">
<div class="table-cell">
<div>
<a href="http://www.kikk.be/2016/" class="btn-link">
<span class="link-inner">
On a button
</span>
</a>
</div>
<div>
<a href="http://www.kikk.be/2016/" data-content="On plain text" class="text-link">
On plain text
</a>
</div>
<div>
<a href="http://www.kikk.be/2016/" class="line-link">
Or on a border
</a>
</div>
</div>
</div>
// By https://twitter.com/thomAufresne
html, {
background-color: #fff;
height: 100%;
}
body {
position: relative;
font-family: 'Noticia Text';
text-align: center;
background: linear-gradient(180deg,#281130 0,#0f0021);
height: 100%;
margin: 8px;
min-height: 500px;
&:before,
&:after {
content:'';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&:before {
background-color: #00ffff;
z-index: -1;
animation: glitchy 0.3s ease 0.3s infinite;
}
&:after {
background-color: #ff00ff;
z-index: -2;
animation: glitchy 0.3s ease infinite reverse;
}
}
h1 {
position: absolute;
color: #fff;
left: -100px;
top: 50%;
transform: rotate(-90deg);
margin: -22px 0 0;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
> div {
padding: 45px 0;
}
}
.btn-link {
position: relative;
display: inline-block;
color: #281130;
font-size: 24px;
letter-spacing: 0.02em;
text-decoration: none;
z-index: 1;
&:before,
&:after {
content:'';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&:before {
background-color: #00ffff;
z-index: -1;
}
&:after {
background-color: #ff00ff;
z-index: -2;
}
&:hover {
.link-inner {
animation: glitchy 0.3s ease 1;
}
&:before {
animation: glitchy 0.3s ease 0.3s infinite;
}
&:after {
animation: glitchy 0.3s ease infinite reverse;
}
}
}
.link-inner {
display: block;
height: 100%;
background-color: #fff;
padding: 15px 25px;
}
.text-link {
position: relative;
display: inline-block;
font-size: 45px;
text-decoration: none;
color: #fff;
z-index: 1;
&:before,
&:after {
content:attr(data-content);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&:before {
color: #00ffff;
z-index: -1;
}
&:after {
color: #ff00ff;
z-index: -2;
}
&:hover {
&:before {
animation: glitchy 0.3s ease 0.3s infinite;
}
&:after {
animation: glitchy 0.3s ease infinite reverse;
}
}
}
.line-link {
position: relative;
display: inline-block;
font-size: 24px;
text-decoration: none;
letter-spacing: 0.10em;
color: #fff;
font-weight: lighter;
z-index: 1;
border-bottom: 1px solid fade(#fff, 75%);
padding-bottom: 10px;
&:before,
&:after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 1px;
visibility: hidden;
}
&:before {
background-color: #00ffff;
z-index: -1;
}
&:after {
background-color: #ff00ff;
z-index: -2;
}
&:hover {
&:before {
visibility: visible;
animation: line-glitchy 0.3s ease 0.3s infinite;
}
&:after {
visibility: visible;
animation: line-glitchy 0.3s ease infinite reverse;
}
}
}
@keyframes glitchy {
0% {transform: translate(-2px, 2px);}
25% {transform: translate(-2px, -2px);}
50% {transform: translate(2px, 2px);}
75% {transform: translate(2px, -2px);}
100% {transform: translate(-2px, 2px);}
}
@keyframes line-glitchy {
0% {transform: translate(-1px, 1px);}
25% {transform: translate(-1px, -1px);}
50% {transform: translate(1px, 1px);}
75% {transform: translate(1px, -1px);}
100% {transform: translate(-1px, 1px);}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.