DEV Community

Cover image for CSS Cyberpunk 2077 Buttons - Taking your CSS to Night City

CSS Cyberpunk 2077 Buttons - Taking your CSS to Night City

Jhey Tompkins on January 22, 2021

If you're in the slightest interested in video games, you're no doubt aware of Cyberpunk 2077. It's one of the most anticipated games of 2020. The ...
Collapse
 
konrud profile image
Konstantin Rouda

Nice work. A word regarding aria-hidden attribute.
This attribute is not a boolean like hidden
so it actually needs to have a value, whether it be true or false.

Collapse
 
jh3y profile image
Jhey Tompkins

Thank you! 🙏
Yep. You're completely right 💯
Thank you for spotting that. I'll make the edit. I usually use a preprocessor that fills that in for me and it's been lost in translation.

Thank you for raising this.

Collapse
 
ddaniel27 profile image
ddaniel27

Omg, this is so awesome hahaha really good work :)

Collapse
 
jh3y profile image
Jhey Tompkins

Thank you! 🙏
Glad you liked it. I'm going to try and write more content this year alongside all the demos I make. Stay tuned!

Collapse
 
gktim profile image
gkTim

Well done! Thx for sharing!

Collapse
 
jh3y profile image
Jhey Tompkins

You're welcome! Plenty more things on the way 🤓

Collapse
 
sarunmrzn profile image
sarunmrzn

amazing, thanks for sharing

Collapse
 
jh3y profile image
Jhey Tompkins

Thank you! 🙏
You're more than welcome. I'm hoping to create a lot more written content this year.

Collapse
 
jackmellis profile image
Jack

Excellent in depth article 👍

Collapse
 
jh3y profile image
Jhey Tompkins

Thank you! Plenty more on the way 👍
Trying to spend more time creating in-depth articles and tutorials this year.

Collapse
 
weasnerb profile image
Brian Weasner

Cool that someone actually uses the aria-hidden in a tutorial where it's needed!

Collapse
 
jh3y profile image
Jhey Tompkins

Yes! 💯 Thank you. I always try to make sure accessibility is paid attention to where I can or at least mention how to cater to it. I think here could do with a prefers-reduced-motion. But, in this case, it kinda takes away from the effect being made for the demo. Worth noting though 👍

Collapse
 
hectorlouder profile image
Hector Louder

wooow men incredible

Collapse
 
jh3y profile image
Jhey Tompkins

Thank you so much! 🙏

Hoping to make more tutorials like this, this year!

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

That was damn cool!

Collapse
 
jh3y profile image
Jhey Tompkins

Thank you! 🙏 Won't be dropping it in all my projects but it's a fun thing to recreate.
Hopefully plenty more on the way for 2021. Trying to focus on making more tutorial content this year.

Collapse
 
egilhuber profile image
erica (she/her)

This is pretty rad!

Collapse
 
jh3y profile image
Jhey Tompkins

Thank you! Glad you like it 🙏

Plenty more on the way. Trying to focus more on sharing how to do things this year.

Collapse
 
mauromattos00 profile image
Mauro Mattos

Wow That's really awesome! Congrats!

Collapse
 
marmeden profile image
eneasmarin

Soooo cool work mate

Collapse
 
cantilux profile image
Enrico Cantile

Very cool.

Collapse
 
jh3y profile image
Jhey Tompkins

Thank you! 🙏 Glad you like it!

Plenty more on the way.

Collapse
 
conorluddy profile image
Conor

Nicely done!

Collapse
 
mangor1no profile image
Mangor1no

Amazing work!

Collapse
 
z2lai profile image
z2lai

This CSS only effect is insanely realistic!

Collapse
 
keisay profile image
Kevin Sengsay

Amazing work Jhey! I guess some next challenge can be to recreate the Cyberpunk 2077 website ? :)

Collapse
 
tomalop profile image
tomalop

Really nice detail on showing the progress rather than just displaying the result :)

Collapse
 
emasuriano profile image
Emanuel Suriano

Great explanation with codepen projects! It must have taken you a lot of work to create one by one, but the sequential explanation is fantastic. Loved it <3

Collapse
 
dannymcgee profile image
Danny McGee

This is really clever, well done. :) I realize "CSS-only" is kind of the schtick, but I'd love to see a version of this with some JavaScript to randomize the keyframes.

Collapse
 
canbax profile image
yusuf

Nice work. Dark colors with neon lights would be cooler I guess

Collapse
 
andrewbaisden profile image
Andrew Baisden

Damn now these are some nice buttons!