Create a neon button with a reflection using CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 7 ต.ค. 2024

ความคิดเห็น • 418

  • @dave6012
    @dave6012 3 ปีที่แล้ว +542

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

  • @pratik_chuckles
    @pratik_chuckles 3 ปีที่แล้ว +680

    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 ปีที่แล้ว +43

      Oh, so happy to hear that!

    • @Digital963
      @Digital963 3 ปีที่แล้ว

      Yea great CSS ch!!!

    • @cerealrakist7360
      @cerealrakist7360 3 ปีที่แล้ว +5

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

    • @tomhakimov1715
      @tomhakimov1715 3 ปีที่แล้ว +1

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

    • @hamhampangpang_customer
      @hamhampangpang_customer 3 ปีที่แล้ว

      @@ccriztoff wtf is wrong with you?

  • @black_platypus
    @black_platypus 3 ปีที่แล้ว +106

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

    • @zero0bb
      @zero0bb 2 ปีที่แล้ว

      I swear...

  • @KXBeats
    @KXBeats 3 ปีที่แล้ว +166

    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 ปีที่แล้ว +112

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

  • @nou9225
    @nou9225 2 ปีที่แล้ว +14

    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

  • @nallawilljr.4873
    @nallawilljr.4873 3 ปีที่แล้ว +107

    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 ปีที่แล้ว +10

      Looking forward to seeing it!

    • @fuballplanet6952
      @fuballplanet6952 3 ปีที่แล้ว +9

      @@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 ปีที่แล้ว +2

      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 ปีที่แล้ว +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 ปีที่แล้ว +2

      @@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 😊

  • @JoolsParker
    @JoolsParker 3 ปีที่แล้ว +20

    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? 😉

  • @ufufu001
    @ufufu001 3 ปีที่แล้ว +24

    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.

  • @yaldakarimi3772
    @yaldakarimi3772 3 ปีที่แล้ว +10

    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 :)

  • @b.alvinn
    @b.alvinn 2 ปีที่แล้ว +18

    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!

  • @jd4300
    @jd4300 3 ปีที่แล้ว +6

    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 ปีที่แล้ว +1

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

    • @jd4300
      @jd4300 3 ปีที่แล้ว +2

      @@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

  • @AbdullahAli-rg8ug
    @AbdullahAli-rg8ug 3 ปีที่แล้ว +17

    Amazing neon effect and also code was well explained!

  • @jessejburton
    @jessejburton 3 ปีที่แล้ว +10

    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! :)

  • @ErvisHysiDev
    @ErvisHysiDev 3 ปีที่แล้ว +1

    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.

  • @0xbitbybit
    @0xbitbybit 3 ปีที่แล้ว +9

    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!!

  • @PiotrG1337
    @PiotrG1337 3 ปีที่แล้ว +5

    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);
    ```

  • @KnightEdits69
    @KnightEdits69 5 หลายเดือนก่อน

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

  • @EthanBMusic
    @EthanBMusic 2 ปีที่แล้ว +4

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

  • @hasanfares5774
    @hasanfares5774 3 ปีที่แล้ว +2

    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.

  • @bischoffdev
    @bischoffdev 2 ปีที่แล้ว

    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).

  • @sleepymarauder4178
    @sleepymarauder4178 3 ปีที่แล้ว

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

  • @Rizzzzzzzzzzzzzzzzzzzzzzzzzzzz
    @Rizzzzzzzzzzzzzzzzzzzzzzzzzzzz 3 ปีที่แล้ว +2

    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 ปีที่แล้ว +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

  • @medch7816
    @medch7816 2 ปีที่แล้ว

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

  • @macseaforth
    @macseaforth 3 ปีที่แล้ว +1

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

  • @fuballplanet6952
    @fuballplanet6952 3 ปีที่แล้ว +1

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

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +2

      So glad that you enjoyed it!

  • @diegomarzo4001
    @diegomarzo4001 3 ปีที่แล้ว +3

    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 :)

  • @yokunaa
    @yokunaa 2 ปีที่แล้ว

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

  • @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!

  • @maherfahd9127
    @maherfahd9127 3 ปีที่แล้ว

    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.

  • @kiddhkane
    @kiddhkane ปีที่แล้ว

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

  • @stephenfranklin2641
    @stephenfranklin2641 3 ปีที่แล้ว

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

  • @zachjensz
    @zachjensz 3 ปีที่แล้ว +8

    I'm going to make my little corner of the internet a little bit more neon!

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +1

      I wish I thought of that for the outro, lol.

    • @Error-gc1rr
      @Error-gc1rr 3 ปีที่แล้ว

      Yo video has uploaded 12 mins ago and you commented 14 hrs ago ?
      Time Traveller confirmed !

    • @AayanamAnirudh
      @AayanamAnirudh 3 ปีที่แล้ว

      @@Error-gc1rr lol I did not notice it..

  • @amruth8668
    @amruth8668 2 ปีที่แล้ว

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

  • @dre429
    @dre429 2 ปีที่แล้ว +4

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

  • @baphometgaming1056
    @baphometgaming1056 3 ปีที่แล้ว +2

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

  • @subratopatnaik6361
    @subratopatnaik6361 3 ปีที่แล้ว +2

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

  • @lepsycho3691
    @lepsycho3691 3 ปีที่แล้ว +1

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

  • @micharozek3046
    @micharozek3046 3 ปีที่แล้ว +3

    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 :)

  • @marlonrtt
    @marlonrtt 3 ปีที่แล้ว +1

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

  • @terencecluttey8302
    @terencecluttey8302 หลายเดือนก่อน

    Just a tip, for a nice authentic neon look, have the shadows that vibrant pink but make the text and border white... Or very light pink.

  • @TheXuism
    @TheXuism 2 ปีที่แล้ว

    Thanks for making my site more cyperpunk!

  • @ilyaslamrani234
    @ilyaslamrani234 3 ปีที่แล้ว +1

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

  • @seantancredi2270
    @seantancredi2270 3 ปีที่แล้ว +2

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

  • @anettebianca6855
    @anettebianca6855 ปีที่แล้ว

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

  • @kevincrinklaw7422
    @kevincrinklaw7422 3 ปีที่แล้ว +1

    I've watched you too long without subbing. I have corrected that travesty today! GREAT looking button, neon is SO hard to pull off.

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว

      Glad you enjoyed it, and thanks for the sub!

  • @rahulk398
    @rahulk398 3 ปีที่แล้ว

    Absolute bliss, pure joy.

  • @piyushmittal8154
    @piyushmittal8154 ปีที่แล้ว

    I didn't know about the filter blurr omg im gonna make one for myself today!!! Wow.

  • @chrismatala4754
    @chrismatala4754 2 ปีที่แล้ว +1

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

  • @MO-di7up
    @MO-di7up 2 ปีที่แล้ว

    My daughter’s first 👩‍💻 is looking 😍thanks to your easy to follow videos. 🙏

  • @alwilkinsburgos2614
    @alwilkinsburgos2614 3 ปีที่แล้ว

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

  • @Ali.AlMamory
    @Ali.AlMamory ปีที่แล้ว

    pure art my friend

  • @facundocorradini
    @facundocorradini 3 ปีที่แล้ว +10

    Amazing effect! this would be a great use case for display-p3 colors from the CSS Color level 4 module, for extra bight color in compatible displays ;)

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +5

      That would be so great for sure! A real neon pink or green would be fantastic. Once browser support increased for those, maybe I should revisit this to introduce them :)

  • @metl_play
    @metl_play 2 ปีที่แล้ว

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

  • @Josuke126
    @Josuke126 2 ปีที่แล้ว

    This is so sick man! Super cool!

  • @divababy2974
    @divababy2974 3 ปีที่แล้ว

    You are the king of CSS!!!

  • @ofskittlez
    @ofskittlez 2 ปีที่แล้ว

    I love technical terms like "glowy thing".

  • @nag_ramone
    @nag_ramone 3 ปีที่แล้ว

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

  • @klemenhorvat-novak2056
    @klemenhorvat-novak2056 2 ปีที่แล้ว

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

  • @tagdesignwebsites
    @tagdesignwebsites 2 ปีที่แล้ว

    Absolutely LOVE your work Kevin - thank you so much

  • @zakaryaelkhattabi5410
    @zakaryaelkhattabi5410 3 ปีที่แล้ว +1

    You did it great ! Awesome Work 😉

  • @atlAs-i9z
    @atlAs-i9z 3 ปีที่แล้ว

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

  • @elielmaruani
    @elielmaruani 3 ปีที่แล้ว +1

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

  • @sanjeevKumar-eg6hp
    @sanjeevKumar-eg6hp 2 ปีที่แล้ว

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

  • @BenRogersWPG
    @BenRogersWPG 3 ปีที่แล้ว

    How is this so amazing!? Wowy

  • @austinsawyer829
    @austinsawyer829 10 หลายเดือนก่อน

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

  • @platek549
    @platek549 3 ปีที่แล้ว

    i think that text shadow inner might on hover look cool asf. good vieo.

  • @MI982
    @MI982 3 ปีที่แล้ว

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

  • @andreaskarz
    @andreaskarz 3 ปีที่แล้ว

    Just awesome -- total crazy stuff

  • @benitodigantenbrink4261
    @benitodigantenbrink4261 2 ปีที่แล้ว +1

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

  • @pastagaz4241
    @pastagaz4241 3 ปีที่แล้ว +1

    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 !

  • @guchierrez
    @guchierrez ปีที่แล้ว

    you are an artist

  • @vin-kry
    @vin-kry 3 ปีที่แล้ว +1

    Actually looking for such video.
    Am a React.js Developer, I started using css after I seen a first video of css tutorial by this channel. Since then I have been using css for my projects.
    Thanks K.P!!!

  • @loulei9339
    @loulei9339 3 ปีที่แล้ว

    Using a before pseudoelement styled with transform properties to create the reflection blows my mind

  • @minhducdao647
    @minhducdao647 3 ปีที่แล้ว

    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.

  • @jaydenmoon1165
    @jaydenmoon1165 3 ปีที่แล้ว

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

  • @noir371
    @noir371 2 ปีที่แล้ว

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

  • @M4CARBINE556
    @M4CARBINE556 ปีที่แล้ว

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

  • @grzesiekcze
    @grzesiekcze 2 ปีที่แล้ว

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

  • @Elegolass
    @Elegolass ปีที่แล้ว

    Thanks Kevin !

  • @arktikmoon
    @arktikmoon 3 ปีที่แล้ว

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

  • @CulturalToast
    @CulturalToast 2 ปีที่แล้ว

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

  • @lurvin2528
    @lurvin2528 2 ปีที่แล้ว

    Me thinking i could pull this off after learning how to change font color in css
    This man is on a whole different level

  • @MarkKaterberg
    @MarkKaterberg 7 หลายเดือนก่อน

    Amazing explanations. Thanks!

  • @GauravKumar-ue7nz
    @GauravKumar-ue7nz 3 ปีที่แล้ว

    WOW, Loved It

  • @felipevazquez1710
    @felipevazquez1710 3 ปีที่แล้ว

    I'm kinda new to CSS and BUT DUDE 12:37 that is just amazing, I didn't know you could do so many things using only CSS and it's not that hard to learn. Guess I'll watch some more of your videos...

  • @suleman234
    @suleman234 3 ปีที่แล้ว +1

    Sir, please make a CSS crash course. I'm trying to learn CSS but no tutorial was that good explaining. then I got an idea that I could request the CSS king for this. this button was awesome. it has so many effects that I never saw and I'm using the pseudoelements the first time. thankyou for creating this cool button

    • @KevinPowell
      @KevinPowell  3 ปีที่แล้ว +1

      I have a free crash course on Scrimba for the real basics, and my responsive bootcamp there is pretty in-depth 😊

  • @himabimdimwim
    @himabimdimwim 2 ปีที่แล้ว

    Digital neon is so cool! I want to make an entire blog website in it!

  • @notmyname998
    @notmyname998 2 ปีที่แล้ว

    I will have to experiment with this kind of buttons from now on, I'm just starting in web development, but I will make sure to include something like this in my portfolio site

  • @williamrajkumar
    @williamrajkumar ปีที่แล้ว

    OMG stunning man

  • @SheriffKoder9
    @SheriffKoder9 2 ปีที่แล้ว

    Awesome man Thanks, really learnt new stuff from the video

  • @johanjubin2007
    @johanjubin2007 3 ปีที่แล้ว +1

    You taught me a lot. Thanks

  • @saminshorif7708
    @saminshorif7708 3 ปีที่แล้ว

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

  • @GloriaHoliday
    @GloriaHoliday 2 ปีที่แล้ว

    I ❤ his smile when he realizes how awesome he is😅

  • @nikhuge6580
    @nikhuge6580 3 ปีที่แล้ว

    I learn lot from this channel

  • @tommy6322
    @tommy6322 3 ปีที่แล้ว +1

    Hi Kevin:) Thank you!

  • @linnjohnsen4073
    @linnjohnsen4073 ปีที่แล้ว

    Thank you! Love your videos!!❤

  • @J90JAM
    @J90JAM 3 ปีที่แล้ว +6

    Stop reading my mind, I actually need to create a neon theme for a clients website I've just started 😄👌

  • @maximcoppieters
    @maximcoppieters 3 ปีที่แล้ว

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

  • @aminedev07
    @aminedev07 3 ปีที่แล้ว

    it looks amazing