Create a neon button with a reflection using CSS

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-...
The code: 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
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - 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 KZread channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: 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!

Пікірлер: 417

  • @dave6012
    @dave60123 жыл бұрын

    That is hands down the coolest button I’ve ever seen. I’m gonna build it just so I can click it.

  • @KevinPowell

    @KevinPowell

    3 жыл бұрын

    Haha, glad that you liked it! 😊

  • @misheltanvirhabib2261

    @misheltanvirhabib2261

    2 жыл бұрын

    😄😄😄

  • @linnjohnsen4073

    @linnjohnsen4073

    Жыл бұрын

    Agree!😍

  • @8koi245

    @8koi245

    Жыл бұрын

    Hahaha same

  • @pratik_chuckles
    @pratik_chuckles3 жыл бұрын

    I am a python developer and have never paid much attention to css, now this channel has got me hooked to css!

  • @KevinPowell

    @KevinPowell

    3 жыл бұрын

    Oh, so happy to hear that!

  • @Digital963

    @Digital963

    3 жыл бұрын

    Yea great CSS ch!!!

  • @cerealrakist7360

    @cerealrakist7360

    3 жыл бұрын

    I’m about to dive head first in to Python 👀 soon. Have learned the basics already and really love it!!

  • @tomhakimov1715

    @tomhakimov1715

    3 жыл бұрын

    I'm a web developer and this channel got me hooked as well

  • @nimphilia

    @nimphilia

    3 жыл бұрын

    @@ccriztoff wtf is wrong with you?

  • @black_platypus
    @black_platypus3 жыл бұрын

    12:35 The moment the blur kicks in... 🤩😍

  • @zero0bb

    @zero0bb

    2 жыл бұрын

    I swear...

  • @KXBeats
    @KXBeats3 жыл бұрын

    CEO of big Company: "Why did you move the button to the left?" Kevin: "Oh my head was just in the way" CEO: "Your- what?"

  • @AJD...
    @AJD...3 жыл бұрын

    no one: Kevin: this looks like comic sans, this will look good

  • @nou9225
    @nou92252 жыл бұрын

    A beginner learning web dev here. I’d like to extend a huge thank you, Kevin, this video made me understand the power of css like no other. Amazing content

  • @macseaforth
    @macseaforth3 жыл бұрын

    This video is just packed with useful information and clear explanations for mid to high level CSS shenanigans. Absolutely brilliant, thank you.

  • @AbdullahAli-rg8ug
    @AbdullahAli-rg8ug3 жыл бұрын

    Amazing neon effect and also code was well explained!

  • @nallawilljr.4873
    @nallawilljr.48733 жыл бұрын

    I'm designing a tribute page for my tutors and you're one of them, KP. Thank you for helping me in my self taught journey ✌🏾

  • @KevinPowell

    @KevinPowell

    3 жыл бұрын

    Looking forward to seeing it!

  • @fuballplanet6952

    @fuballplanet6952

    3 жыл бұрын

    @@KevinPowell First of all, I hope you will see my comment. I want to thank you soo much for what you giving to us in terms of toturials, for you Maybe this is normal thing, but believe me, you are doing a lot, In developed countries. There are many opportunities in universities, private schools and programming camps, so people have a lot of options to learn programming, but in underdeveloped countries Like my country where We have just a cheap computer and slow internet LOL, we do not have these opportunities, and you and the likes of you provide services to humanity with these TOTURIALS. Continue and be ambitious. Perhaps one day someone from underdeveloped country will come to you and say you were my teacher when I did not have one ,and I hope that you will provide us with lessons in the JavaScript language we need that so much, so you are the best in the field.

  • @A_Lesser_Man

    @A_Lesser_Man

    3 жыл бұрын

    super idea. i'm adding Kevin's name to my credits on my about page (if he's down for that)

  • @nallawilljr.4873

    @nallawilljr.4873

    3 жыл бұрын

    @@fuballplanet6952 "When something is important enough, you do it even if the odds are not in your favor." - Elon Musk

  • @nallawilljr.4873

    @nallawilljr.4873

    3 жыл бұрын

    @@A_Lesser_Man We all seem like open-minded individuals with a passion for coding, so if you don't mind, dm me on IG @nallawilljr I'd love to share ideas or maybe even work on some projects together 😊

  • @yaldakarimi3772
    @yaldakarimi37723 жыл бұрын

    I learned everything I know in css from you, but I'd dedicated all my time to react and learning the required technologies over the past year to be a full-time frontend developer and I did it! now I'm back to your channel again to learn more stuff in css and god you are such a great teacher, I just enjoy watching your videos. I want to thank you for all your great content since you and your videos made me even consider the path I'm on now! thank you :)

  • @hasanfares5774
    @hasanfares57743 жыл бұрын

    Thanks, I have learned a lot from this channel, I like how you get into details and even change code to explain it. It just sinks in.

  • @JoolsParker
    @JoolsParker3 жыл бұрын

    This is an awesome effect - but how you demystify css with step-by-step coding and explanations for every line is even more awesome. Who knew css could be soooo simple? 😉

  • @baphometgaming1056
    @baphometgaming10563 жыл бұрын

    This is amazing Kevin, thank You for creating Your content!

  • @0xbitbybit
    @0xbitbybit3 жыл бұрын

    Freakin awesome Kevin, it's that reflection on the "ground" that does it, makes me alll warm and fuzzy, I have an urge to make an entirely retro neon themed website for absolutely no reason now. So cool! Thanks!!

  • @lepsycho3691
    @lepsycho36913 жыл бұрын

    Amazing explanation of what is going on and concise example! Thank you!

  • @micharozek3046
    @micharozek30463 жыл бұрын

    Hey Kevin! I am watching you from a couple weeks and I just wanna say that you are a great person. Thank you for sharing this super nice content :) Keep it up man! Cheers from Poland :)

  • @ufufu001
    @ufufu0013 жыл бұрын

    12:38 i literally gasped when you applied blur here. the result looks so good. this video has convinced me to buy “css: the definite guide”. it’s time to stop neglecting css. it is important and every dev should be good at it.

  • @tagdesignwebsites
    @tagdesignwebsites2 жыл бұрын

    Absolutely LOVE your work Kevin - thank you so much

  • @jessejburton
    @jessejburton3 жыл бұрын

    I love the feeling of excitement I felt (which only fellow CSS nerds will understand haha) when you applied filter blur and that reflective glow appeared. So cool! :)

  • @xiggywiggs
    @xiggywiggs Жыл бұрын

    This is really friggin rad! I split my time pretty evenly between 2d graphics design, 3d art and design and software development, so it was wild to all of a sudden see concepts from 3d graphics just all of a sudden hanging out with CSS like this!

  • @KnightEdits69
    @KnightEdits693 ай бұрын

    What a good video. Straight to the point, not confusing, and you’re really entertaining to listen to. This helped so much

  • @maherfahd9127
    @maherfahd91273 жыл бұрын

    I really have high affinity for your videos, I nearly ignored CSS to frameworks but av been forced to remain in CSS because of your tutorials. Everything is achievable. Thanks alot.

  • @metl_play
    @metl_play2 жыл бұрын

    I like this design and how you explained it all the way through, you are great.

  • @chrismatala4754
    @chrismatala47542 жыл бұрын

    Excellent video, everything is explained, it helped me a lot! Awesome effect!

  • @diegomarzo4001
    @diegomarzo40013 жыл бұрын

    You blow my mind with this one, I didn't know about perspective transformations and it is amazing, it reminds me the Mode7 of SNes :)

  • @sleepymarauder4178
    @sleepymarauder41783 жыл бұрын

    You are the first person to not only explain CSS but make me understand it and want to work with CSS.

  • @nag_ramone
    @nag_ramone3 жыл бұрын

    That was awesome, really nice effect. Btw now I understand what is before and after, thanks!

  • @elielmaruani
    @elielmaruani3 жыл бұрын

    Wow it's so amazing!! Thanks for your really helping tutorials!!🤩🤩

  • @Somebody-tb7um
    @Somebody-tb7um2 жыл бұрын

    I've used this button on some of my personal projects(mostly just practicing my HTML and CSS skills) and it's amazing I love it, also even though i don't like css that much you've truly helped me like it just a bit more. Thanks Kevin!

  • @KevinPowell

    @KevinPowell

    2 жыл бұрын

    Great to hear!

  • @Josuke126
    @Josuke1262 жыл бұрын

    This is so sick man! Super cool!

  • @zakaryaelkhattabi5410
    @zakaryaelkhattabi54103 жыл бұрын

    You did it great ! Awesome Work 😉

  • @jaydenmoon1165
    @jaydenmoon11652 жыл бұрын

    This was an awesome fun exercise - gave me many ideas for this button use - thank you!!!

  • @yokunaa
    @yokunaa2 жыл бұрын

    You're the GOAT !!!! My CSS skills improved so much. Thank you !!!

  • @grzesiekcze
    @grzesiekcze2 жыл бұрын

    Awesome, I really enjoyed this video! Definitely using this in my projects!

  • @ilyaslamrani234
    @ilyaslamrani2343 жыл бұрын

    I'll try to replicate this tomorrow. This is so cool Kevin.

  • @alwilkinsburgos2614
    @alwilkinsburgos26143 жыл бұрын

    This tutorial simplifies the application of rem and em, THANK YOU

  • @EthanBMusic
    @EthanBMusic2 жыл бұрын

    That's a super nice button. Very helpful video!

  • @austinsawyer829
    @austinsawyer8298 ай бұрын

    This is amazing! I love your videos! Thanks for all your expertise!!

  • @CulturalToast
    @CulturalToast2 жыл бұрын

    Never have I subbed so fast. Your videos are so amazing and bingable! Thank you so much for your work!

  • @chelseyhaynes22
    @chelseyhaynes222 жыл бұрын

    So awesome! Your videos never disappoint. 😎

  • @klemenhorvat-novak2056
    @klemenhorvat-novak20562 жыл бұрын

    Best channel for CSS thank you Kevin for amazing content :)

  • @kiddhkane
    @kiddhkane Жыл бұрын

    This is amazing. You're definitely the best CSS youtuber.

  • @linnjohnsen4073
    @linnjohnsen4073 Жыл бұрын

    Thank you! Love your videos!!❤

  • @seantancredi2270
    @seantancredi22703 жыл бұрын

    You, sir, earned yourself a sub for this video!Great work!

  • @dre429
    @dre4292 жыл бұрын

    I love this! I’ve been looking to get more professional with web design and I love your content!

  • @pastagaz4241
    @pastagaz42413 жыл бұрын

    Awesome glowing button, I don’t know if i will use it in prod on my job projects 😓 but it’s always good to know how you make it real !

  • @maximcoppieters
    @maximcoppieters3 жыл бұрын

    Thank you for this. I learned a lot from this video alone!

  • @MarkKaterberg
    @MarkKaterberg4 ай бұрын

    Amazing explanations. Thanks!

  • @sanjeevKumar-eg6hp
    @sanjeevKumar-eg6hp2 жыл бұрын

    This video was awesome gave me a lot of new angles to think on.

  • @Rizzzzzzzzzzzzzzzzzzzzzzzzzzzz
    @Rizzzzzzzzzzzzzzzzzzzzzzzzzzzz3 жыл бұрын

    Having a hard time figuring out how to add multiples of these on one page, apart from that, this is great! Thanks for yet another amazing vid!

  • @DajuSar

    @DajuSar

    3 жыл бұрын

    Then a framework would be usefull, you can use React, get this button in his own class so you can just copy and paste it. And the css would be a module thats it

  • @M4CARBINE556
    @M4CARBINE556 Жыл бұрын

    Amazing video! These buttons were perfect for my client's project. I always enjoy your stuff so I gave you a sub.

  • @saminshorif7708
    @saminshorif77082 жыл бұрын

    Really helpful video. Please make more of these types of videos with details.

  • @SheriffKoder9
    @SheriffKoder9 Жыл бұрын

    Awesome man Thanks, really learnt new stuff from the video

  • @PiotrG1337
    @PiotrG13372 жыл бұрын

    Thank you very much for this! Since the button is getting brighter when hovering, I also added the following to .neon-button:hover to add more perceived light to the scene. Might be a touch too much, but you can adjust as you see fit. ``` transform: perspective(1em) rotateX(40deg) scale(1.3, 0.5); ```

  • @andreaskarz
    @andreaskarz2 жыл бұрын

    Just awesome -- total crazy stuff

  • @thecutedreamkostasp.4449
    @thecutedreamkostasp.44493 жыл бұрын

    Nice job and creativity buddy! Actually Well Cssed!

  • @mohammadqawaqneh1455
    @mohammadqawaqneh14553 жыл бұрын

    Great work, I really enjoyed 👍

  • @noir371
    @noir3712 жыл бұрын

    This is so cool. Been wanting to make a practice website with this sort of theme

  • @yutaishere
    @yutaishere3 жыл бұрын

    That was really really nice! Thanks!

  • @alichalawi2921
    @alichalawi2921 Жыл бұрын

    pure art my friend

  • @willjohnson4579
    @willjohnson45793 жыл бұрын

    Using something similar to this in production, thanks for this tutorial!

  • @stephenfranklin2641
    @stephenfranklin26412 жыл бұрын

    I have to say,,, You are a real and true CSS legend... Come from my heart 💗💗

  • @rahulk398
    @rahulk3983 жыл бұрын

    Absolute bliss, pure joy.

  • @BenRogersWPG
    @BenRogersWPG3 жыл бұрын

    How is this so amazing!? Wowy

  • @MI982
    @MI9823 жыл бұрын

    This looks so cool and it doesn't seem complicated. Imma steal it.

  • @bischoffdev
    @bischoffdev2 жыл бұрын

    This is making me understand more and more why CSS development is in fact real development work. It is simply amazing what's possible with this when you really know about it (which I don't yet - I am mainly a Java developer).

  • @minhducdao647
    @minhducdao6473 жыл бұрын

    I really appreciate the content and a lot of your tips throughout the video. Also just want to express my admiration to your rap-like speaking speed while maintaining the tempo and smoothness. I was thinking in my head “I would need a speaking course to get to this level”

  • @KevinPowell

    @KevinPowell

    3 жыл бұрын

    Haha, am I that fast? Lol.

  • @SzintillationGone
    @SzintillationGone3 жыл бұрын

    Looks amazing!

  • @fabriciorossi3948
    @fabriciorossi39483 жыл бұрын

    Really very awesome, congratulations

  • @arktikmoon
    @arktikmoon3 жыл бұрын

    Yes! I did it 🕺🤘👍! It was cool. Thanks for this video.

  • @bhimsendabby
    @bhimsendabby3 жыл бұрын

    You are amazing. Such a good content. Thank you so much for this video Sir.

  • @palianyts1a
    @palianyts1a Жыл бұрын

    Thanks a lot for that information, that was quite useful ^^

  • @benitodigantenbrink4261
    @benitodigantenbrink42612 жыл бұрын

    looks amazing, luv it 👍 Hope I get to use this someday :D Customers usually aren't looking for this kind of style 🙄

  • @greenstarlover1
    @greenstarlover13 жыл бұрын

    Cool video. Definitely something I would show off in my projects just because.

  • @amruth8668
    @amruth86682 жыл бұрын

    i was a subscriber before i knew what was CSS now iam learning Webdevlopment and it is helping a lot such awesome content

  • @subratopatnaik6361
    @subratopatnaik63613 жыл бұрын

    My inspiration is you for learning more on css☺️☺️

  • @GauravKumar-ue7nz
    @GauravKumar-ue7nz3 жыл бұрын

    WOW, Loved It

  • @randelnowell7233
    @randelnowell72333 жыл бұрын

    This was an awesome video!

  • @naveenvenkateshk
    @naveenvenkateshk3 жыл бұрын

    I always click the like button before even watching the video because your videos are always great and I learn a lot of fun stuff. Your videos are guaranteed to be good

  • @jackboss1150
    @jackboss11502 жыл бұрын

    awesome work!

  • @Elrinth
    @Elrinth2 жыл бұрын

    Very beautiful button. Not sure when I'd use it, but it looks great! :D

  • @ErvisHysiDev
    @ErvisHysiDev3 жыл бұрын

    If anyone cant learn from this video, don't mean to give it dislike, just to know how difficult is CSS, imagine to explain to the others, this guy got my attention, subscribe and likes in some other videos.

  • @nro337
    @nro3373 жыл бұрын

    Thanks for the tutorial!

  • @dchikm6101
    @dchikm6101 Жыл бұрын

    Thanks, that was very helpful :D

  • @lifeisniche
    @lifeisniche3 жыл бұрын

    This is also amazing as last one I will be practicing it tomorrow 👍👍

  • @williamrajkumar
    @williamrajkumar Жыл бұрын

    OMG stunning man

  • @aaronschneider1581
    @aaronschneider15812 жыл бұрын

    Massively cool, good vid/tutorial.

  • @sairaj6875
    @sairaj68753 жыл бұрын

    This was awesome! Subscribed to this channel :)

  • @knmvstr1347
    @knmvstr13473 жыл бұрын

    Really instructive thank you

  • @fuballplanet6952
    @fuballplanet69523 жыл бұрын

    kp you deserve an oscar for this tutorials , really thanks from bottom of my heart

  • @KevinPowell

    @KevinPowell

    3 жыл бұрын

    So glad that you enjoyed it!

  • @divababy2974
    @divababy29743 жыл бұрын

    You are the king of CSS!!!

  • @medch7816
    @medch78162 жыл бұрын

    I liked that Glowing Cool Button so I it on my HTML/CSS school project . and it looks beautiful

  • @jd4300
    @jd43003 жыл бұрын

    Recently hired as a web designer (3 months ago) this is my favorite channel hands down for CSS. You are the man Kevin! And your channel played a vital role in me switching careers and going into web design/development. Thank you!

  • @jw200

    @jw200

    3 жыл бұрын

    How many years before you applied? I mean experience and what experience you have?

  • @jd4300

    @jd4300

    3 жыл бұрын

    @@jw200 4 months of learning before I applied ! Just build projects. Build websites. Have projects to show off your skills. I was also getting the most interviews I have ever gotten in my life

  • @anettebianca6855
    @anettebianca6855 Жыл бұрын

    fascinating! Been doing 3D since 2010 - HTML & CSS have come a LONG way

  • @funkAduckiejunior
    @funkAduckiejunior Жыл бұрын

    Thanks Kevin !

  • @aminedev07
    @aminedev073 жыл бұрын

    it looks amazing

  • @marlonrtt
    @marlonrtt3 жыл бұрын

    Learning CSS is a big pain in the ass, but you make it so fun! Thanks!

  • @atlAs-i9z
    @atlAs-i9z2 жыл бұрын

    You have inspired me as a beginner web developer and one day i hope to become like you in my css😁

  • @nikhuge6580
    @nikhuge65803 жыл бұрын

    I learn lot from this channel

  • @TheXuism
    @TheXuism2 жыл бұрын

    Thanks for making my site more cyperpunk!