Advanced Button Hover Animations - CSS Only

[@nomaddeveloper8399]

Your videos are amazing!!! All I see are top tier informations and tips!!! I am studying and trying to improve my web developer skills, and every time I watch one of your videos I learn something completely new. Keep up the awesome work!!!

[@WebDevSimplified]

Thank you!

[@thechingochingo9956]

where are u now ,did u give up did u get a job? i really hope u reply

[@kutsumikabe9113]

Bottons preview 00:47 Border pop 01:55 Background slide 06:50 Bacground circle 11:24 Border Underline 15:58

[@kokimargalitadze1932]

get this man to the top

[@Shubham-xh9nz]

for beginners like this place is heaven.. keep uploading.

[@Adanmacreates]

I was about to say i wish i found this video two days ago when i was trying to do the exact same thing but i see this was just uploaded lmao

[@JPNSynster]

I'm actually just going through that roadmap you made for 2021 for review and some practice, and I can say I do love your style compared to others I've watched cause I've learned some other neat tricks. Thank you Kyle !

[@shabbirbarwaniwala7323]

I'm 11 and I am learning HTML, CSS and JavaScript and you make all the concepts really clear for me to understand

[@avien9068]

if you keep working hard you'll be very successful. Well done for starting at such a young age

[@Charlsteezy]

I wish I was your age when I started learning! Keep going and it will all be worth it.

[@themessifan1785]

@@avien9068 i am also learning to code i now python pretty good and want to make website i started 4 days ago and then i started making javascript games here is all my work put into 1 (i am 10) website.themessifan908.repl.co

[@krshnabakth]

Man don't just focus on programming , you should complete your studies first. So learn them only when your free!

[@syezaian2858]

Same

[@deansprivatearchive]

I came here for an even different reason! I came across a website before that has a blue slide animation when you hover over links, so that's why I'm here. Not just for buttons!

[@jaydenmoon1165]

I am working on a codebook - just for fun projects - and I always enjoyed your videos - this was really fun to work along with - thank you

[@willgd5950]

seriously, i learn the most from you, thank you so so much

[@theleancoder]

I was struggling with this type of css but you make it look damn easy bro!

[@channel19549]

I had to leave a comment,this is the best video I have seen on this topic It also explains so that we can miss around with it.THANK YOU!!

[@ТимурТокумов-и1к]

One of my favorite channels! Thank you so much for the videos and simple explanation!)

[@fluffydoggo]

I don't know why but I always watch your videos when its like 12am so it's like: "Thats so cool, but I can't do stuff with it because I need sleep"

[@karenkharatyan1]

You can use just outline and outline-offset properties for the first hover type if you not need some rounded corners

[@mdazharuddin4684]

If your button has border-radius, outline also gets the same radius. So you can still use it.

[@InsaneParrot]

Thank you for the tutorial, i did it almost exactly like on it and i didnt work and your tutorial was so clear to read that i could debug it myself.

[@chethananderson3446]

you have these super cool techniques to apply on , really enjoyed the whole video and made me easy to learn. Thanks brotha

[@bakor-org]

Hey Kyle, I really enjoy your content and the way you explain stuff. I would like to suggest some topics that might be great for intermediate/advanced developers, 1. How to set up your project in order to make it scaleable (Folder-structure and some other stuff that I don't know ). 2. System design for a big project, with a large user base. 3. How to write clean code. (Good/Bad habits, naming conventions, etc). Please like this comment if you want some of these topics to be covered, Thanks :)

[@learntocode1878]

Hey, thanks for your tutorials I really enjoy your videos, its also great that you split the screens so we can see both code and browser.

[@MrGreenpaulo]

First time visiting your channel. Great video! Exactly what i was looking for. Thanks Kyle. Subbed.

[@tuckercoffin2164]

You are making me like CSS. Thanks

[@WebDevSimplified]

That is awesome! CSS is amazing and I absolutely love it since it allows you so much freedom and creativity.

[@tuckercoffin2164]

@@WebDevSimplified Before I got into web development I was experimenting with c, c++ and Pascal. It was nice and interesting, but you mostly only had command line programs. It is interesting too and it teaches you a lot about programs and computers, but when I saw that I could make my own website and make it dynamic and look how I wanted fairly easily, I was hooked. It's great. Thanks for simplifying the web for us. :)

[@lizalizaveta1882]

Awesome, I was able to do it! Still don't understand fully how it works, but hopefully will get it with more practice.

[@avneet12284]

This was great. I didn't understand the z- index trick. How does z-index: 1 on button bring the pseudo element in front of button background but behind the text ?

[@wh4le287]

avneet12284 That confuses me as well.

[@RiversDelay]

When you set z-index: -1 to the pseudo-element, it makes the pseudo-element go below the button, because the default to z-index is 0, but then if you set a z-index: 1 to the button, it creates a stacking context on the button which makes its children not able to go below the button itself, so the pseudo-element goes below everything that is inside the button, the text in this case, but not the button itself. watch?v=uS8l4YRXbaw this video might help you understand stacking contexts better.

[@adityasharma6980]

Thank you soo much. Cleared my concepts a lot

[@WebDeveloper682]

absolutely awesome video , big respect you my brother

[@NOTHING-en2ue]

the only teacher that i can understand thanks a lot for your helpful tutorials ❤

[@incrediblefman8126]

thank you so much for these videos

[@srinivasnahak3473]

I'm truly grateful to you for your amazing tutorials....just keep it up I can see your shining future brother And some day post a video about yourself means what do you do and how the journey started etc.

[@ryancharlesalcaraz4436]

thank you very much it helps me a lot

[@basiccodingwithadam8125]

Great video, easy to follow instructions

[@matthewc4590]

Hey mate thanks for the content. It's been really helpful.

[@preetamvarun9219]

Thank you!

[@TVBuzzy]

Great tutorial. Thanks!

[@ngthuan7497]

Thank you so much for these videos 👍

[@najubudeen6294]

All of your videos are very understandable👏.

[@beinyourguard]

your channel is very helpful, thank you

[@usama57926]

amazing video and design

[@rodriguin2810]

Thanks a lot bro!

[@vora320]

Btw guys you can use the "inset" syntax instead of writing top:0; left:0; buttom:0;right:0; instead you can use "inset: 0px 0px 0px 0px;

[@mohammad-karbalaee]

Pretty helpful!!!

[@ChessGeek1]

How can I link thsi button to a url?

[@jocketovieksperimenti1006]

thanks!!!!!

[@universitetiim2853]

Thankyou ^^

[@kenyonhuppe]

6:48 - Background Slide

[@usama57926]

thank u sir

[@method_actor]

I know this is an old video, but I don't really understand why that trick with the stacking contexts works. Setting a z-index of -1 on the pseudo element puts it behind the element, but then setting the z-index of the element to 1 makes the pseudo element appear above the element's background? I know it might not be a super exciting topic, but if you did a video on stacking contexts, that would be amazing. Thanks for all the great content!

[@sonamuhialdeen7866]

So good tutorial

[@abishekh07]

Hello, Kyle. Great video as always! Do you think that it's possible to achieve the "border-pop" hover animation using outline and outline-offset?

[@WebDevSimplified]

You could do that as well

[@sounak2009]

Hi Kyle. I love your content a lot. I have two questions for you. 1. Could you do a simple jwt tutorial showing how to save the token in a front end powerd by react? 2. How do you shave so cleanly? 😂😂 Big fan of your channel

[@ohkarsworld1500]

effects are awesome but little complicated in tutorial and step by step

[@tambolaking5383]

I want tutorial on css to get the post click animation like with material design. The ripple effect.

[@adeshplayz4936]

Amazing content

[@rachelrukavina8934]

Hello, thank you for your help. For the most part I got the Background Slide working, but it is 'flickering' on the ease-in. It is perfectly smooth on the ease-out though. Do you know why this is?

[@阿騰-g7n]

thx a lot

[@TheVideogamemaster9]

My transitions always have a weird issue where they have abrupt endings when you unhover, rather than easing back to the original state, but if I do anything to fix it, then unwanted animations play when I load or reload the page. A lot of people apparently solve that with javascript and jquery lol

[@parrapaTh3Rappa]

Hey, not sure if you ever figured this out, but make sure the transition property is on the element that's actually doing the transitioning rather than the one with the :hover pseudo-class. If you have it on the element with the :hover, then the second you unhover, the transition property ceases to exist, therefore snapping whatever it was back into place rather than transitioning smoothly. I just happened to see this on another one of his videos, hehe.

[@abhishekmaurya8330]

Am i only who never saw Kylie smiling?? Lol

[@tambolaking5383]

See thumbnail

[@omar9987]

Did you just call him Kylie?

[@J.A.C.K.3D]

A very helpful video. Thank you. Could you explain, what the asterisk in your pseudo elements means at the beginning in your style.css?

[@mdhasiburrahmannafiz9984]

Superb..

[@fetB]

mine doesnt adjust to the same size but full width of the page/viewbox. Why?

[@muhammadjunaid3684]

In background slide effect. You can simply set width to 0% or 100% to cover the area. Btw, I love your tutorials.

[@davidlew4391]

Can I use after instead of before? I tried it seems no different.

[@RajeshSamson]

Can you make a video tutorial on wed assembly??

[@udiaichel2791]

Does anyone know how to add these to shopify buttons?

[@etchris]

Can this be down with list elements?

[@sandil1232]

"my name is kyle and my job is to simplify the web for you " me : destroys the like button

[@shiktabanik1804]

Love form Bangladesh 😘😘

[@DevvratShukla]

z-index: -1 did not work for me, it starts to show the grey button with text and hides the pseudo-element...

[@johnnyxp64]

would love to find equally interested tutorials but for the new kid on the block that should rule them all.... Blazor. 🙄😁

[@AJ-qv5px]

you sound like the daily dose of the internet guy

[@miketennor5684]

Great video. How about posting the source code?

[@bjarnieinarsson3472]

Hmmm... multiply by -2 on every corner?

[@davidlew4391]

I am so confused. Why multiply by -2?

[@mariokrstevski8836]

How can I get in touch with you bro?

[@yese3064]

Doesn't work with SASS

[@leonardol8158]

These buttons are cool, but I have a problem, no button matches my website and it’s getting a bit trashy with the colors I’m using. And I'm not a programmer, I'm just creating a website as a hobby. I'm having a hard time using colors that make the design good. Can someone help me?

[@exnihilo1227]

Leonardo L i found a website for choosing some color: colorsinspo.com

[@Henry_Nunez]

👍🔔

[@Khakim0598]

Please tell me, I’m making a site where under each picture there will be a button to download the picture before the download attribute worked now it doesn’t work how can this be done using JavaScript

[@dawdacolley3323]

Good videos all the time but sad to watch because od fint size is bad. Please consider to add fint size of your text. Sorry to say but checkout Mosh videos.

[@Shubham-xh9nz]

advance buttons with css hover effecs css buttona

[@jishabipin9228]

everything is clear while watching it but when it comes to practice....._ _

[@sm1ley732]

you're handsome dude 😁

[@hipster4849]

does it work in sublime text?

[@thelegendofzelda187]

🥺

[@mohdahmad]

sir, please make a video on how to make interactive animations like instagram.com/p/B7gW9TpgSC8/?

[@pulga961]

nice but mobile users cannot hover....

[@aammssaamm]

Not everything in this world about mobile users :)