Glitch effect on hover, as seen on http://www.kikk.be/2016/. Shout out to @Dogstudio for this cool website!
A Pen by Thomas Aufresne on CodePen.
Glitch effect on hover, as seen on http://www.kikk.be/2016/. Shout out to @Dogstudio for this cool website!
A Pen by Thomas Aufresne on CodePen.
<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);} | |
} |