Create a neon button with a reflection using CSS

Veröffentlicht am: 30 April 2021
auf dem Kanal: Kevin Powell
535,587
27k

A look at creating a neon button effect using CSS, including a glowing reflection on the "ground", and a little dive into the world of performance as well.

Performance link I mentioned in the video:   / how-to-achieve-60-fps-animations-with-css3  

The code: https://codepen.io/kevinpowell/pen/QW...

⌚ Timestamps
00:00 - Introduction
00:50 - What we're starting with
01:20 - Styling the button
03:54 - Adding the glow to the text
06:20 - Adding the glow to the button
07:39 - Adding the reflection
13:42 - Adding the hover/focus styles
#css

--

Come hang out with other dev's in my Discord Community
💬   / discord  

---

Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon:   / kevinpowell  

---

My editor: VS Code - https://code.visualstudio.com/

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram:   / kevinpowell.co  
Twitter:   / kevinjpowell  
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!


Auf dieser Seite können Sie das Online-Video Create a neon button with a reflection using CSS mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Kevin Powell 30 April 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 535,587 Mal angesehen und es wurde von 27 tausend den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!