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!!!
@@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
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 !
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 :)
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!
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 ?
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.
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
@@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. :)
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!
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.
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?
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
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.
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?
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.
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
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
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!!!
Thank you!
where are u now ,did u give up
did u get a job? i really hope u reply
Bottons preview 00:47
Border pop 01:55
Background slide 06:50
Bacground circle 11:24
Border Underline 15:58
get this man to the top
I'm 11 and I am learning HTML, CSS and JavaScript and you make all the concepts really clear for me to understand
if you keep working hard you'll be very successful. Well done for starting at such a young age
I wish I was your age when I started learning! Keep going and it will all be worth it.
@@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
Man don't just focus on programming , you should complete your studies first. So learn them only when your free!
Same
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 !
for beginners like this place is heaven.. keep uploading.
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 :)
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
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!
One of my favorite channels! Thank you so much for the videos and simple explanation!)
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!!
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"
seriously, i learn the most from you, thank you so so much
First time visiting your channel. Great video! Exactly what i was looking for. Thanks Kyle. Subbed.
I was struggling with this type of css but you make it look damn easy bro!
All of your videos are very understandable👏.
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
Thank you soo much. Cleared my concepts a lot
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 ?
avneet12284 That confuses me as well.
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.
absolutely awesome video , big respect you my brother
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.
you have these super cool techniques to apply on , really enjoyed the whole video and made me easy to learn. Thanks brotha
Thank you so much for these videos 👍
the only teacher that i can understand thanks a lot for your helpful tutorials ❤
You can use just outline and outline-offset properties for the first hover type if you not need some rounded corners
If your button has border-radius, outline also gets the same radius. So you can still use it.
Great tutorial. Thanks!
amazing video and design
thank you so much for these videos
thank you very much it helps me a lot
Great video, easy to follow instructions
Hey mate thanks for the content. It's been really helpful.
your channel is very helpful, thank you
Awesome, I was able to do it! Still don't understand fully how it works, but hopefully will get it with more practice.
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.
Thank you!
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
You are making me like CSS. Thanks
That is awesome! CSS is amazing and I absolutely love it since it allows you so much freedom and creativity.
@@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. :)
Thanks a lot bro!
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!
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.
thank u sir
So good tutorial
Pretty helpful!!!
6:48 - Background Slide
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?
You could do that as well
Amazing content
thanks!!!!!
thx a lot
A very helpful video. Thank you. Could you explain, what the asterisk in your pseudo elements means at the beginning in your style.css?
effects are awesome but little complicated in tutorial and step by step
Love form Bangladesh 😘😘
Can you make a video tutorial on wed assembly??
Thankyou ^^
Superb..
Can this be down with list elements?
How can I link thsi button to a url?
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;
Can I use after instead of before? I tried it seems no different.
"my name is kyle and my job is to simplify the web for you "
me : destroys the like button
z-index: -1 did not work for me, it starts to show the grey button with text and hides the pseudo-element...
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?
mine doesnt adjust to the same size but full width of the page/viewbox. Why?
Great video. How about posting the source code?
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
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.
would love to find equally interested tutorials but for the new kid on the block that should rule them all.... Blazor. 🙄😁
How can I get in touch with you bro?
I want tutorial on css to get the post click animation like with material design. The ripple effect.
In background slide effect. You can simply set width to 0% or 100% to cover the area.
Btw, I love your tutorials.
Am i only who never saw Kylie
smiling?? Lol
See thumbnail
Did you just call him Kylie?
you sound like the daily dose of the internet guy
Does anyone know how to add these to shopify buttons?
Doesn't work with SASS
👍🔔
Hmmm... multiply by -2 on every corner?
I am so confused. Why multiply by -2?
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?
Leonardo L i found a website for choosing some color:
colorsinspo.com
you're handsome dude 😁
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.
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
advance buttons with css
hover effecs
css buttona
does it work in sublime text?
everything is clear while watching it but when it comes to practice....._ _
🥺
sir, please make a video on how to make interactive animations like
instagram.com/p/B7gW9TpgSC8/?
nice but mobile users cannot hover....
Not everything in this world about mobile users :)