Cyberpunk 2077 Button Glitch Effect in CSS

Wonderful demo by Jhey Tompkins, showcasing some recreated glitch effect buttons based upon Cyberpunk 2077.

Recreate the Cyberpunk 2077 Button Glitch Effect in CSS →

If you can’t quite follow there — as it’s quite a big demo — here’s a more simplified demo from 2015 featuring a simple glitch text effect:

See the Pen
CSS Glitch
by Bramus (@bramus)
on CodePen.

Both demos work in a similar way: data is duplicated, and a clip-path is being animated on top of it.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.