@@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
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!!!
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!
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'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 !
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.
@@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. :)
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
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.
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
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.
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
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
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
for beginners like this place is heaven.. keep uploading.
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!
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'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 !
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
One of my favorite channels! Thank you so much for the videos and simple explanation!)
absolutely awesome video , big respect you my brother
the only teacher that i can understand thanks a lot for your helpful tutorials ❤
Thank you soo much. Cleared my concepts a lot
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
I was struggling with this type of css but you make it look damn easy bro!
All of your videos are very understandable👏.
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.
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.
you have these super cool techniques to apply on , really enjoyed the whole video and made me easy to learn. Thanks brotha
First time visiting your channel. Great video! Exactly what i was looking for. Thanks Kyle. Subbed.
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.
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.
thank you very much it helps me a lot
Awesome, I was able to do it! Still don't understand fully how it works, but hopefully will get it with more practice.
amazing video and design
Thank you so much for these videos 👍
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. :)
Can this be down with list elements?
How can I link thsi button to a url?
Thank you!
Great tutorial. Thanks!
6:48 - Background Slide
Can I use after instead of before? I tried it seems no different.
thank you so much for these videos
Hey mate thanks for the content. It's been really helpful.
So good tutorial
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
Great video, easy to follow instructions
effects are awesome but little complicated in tutorial and step by step
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!
your channel is very helpful, thank you
Thanks a lot bro!
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.
mine doesnt adjust to the same size but full width of the page/viewbox. Why?
thank u sir
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?
Amazing content
Pretty helpful!!!
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;
Does anyone know how to add these to shopify buttons?
Can you make a video tutorial on wed assembly??
thx a lot
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
Love form Bangladesh 😘😘
Superb..
z-index: -1 did not work for me, it starts to show the grey button with text and hides the pseudo-element...
thanks!!!!!
A very helpful video. Thank you. Could you explain, what the asterisk in your pseudo elements means at the beginning in your style.css?
Thankyou ^^
How can I get in touch with you bro?
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.
Am i only who never saw Kylie
smiling?? Lol
See thumbnail
Did you just call him Kylie?
"my name is kyle and my job is to simplify the web for you "
me : destroys the like button
I want tutorial on css to get the post click animation like with material design. The ripple effect.
Great video. How about posting the source code?
would love to find equally interested tutorials but for the new kid on the block that should rule them all.... Blazor. 🙄😁
you sound like the daily dose of the internet guy
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
In background slide effect. You can simply set width to 0% or 100% to cover the area.
Btw, I love your tutorials.
Hmmm... multiply by -2 on every corner?
I am so confused. Why multiply by -2?
Doesn't work with SASS
does it work in sublime text?
you're handsome dude 😁
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
everything is clear while watching it but when it comes to practice....._ _
advance buttons with css
hover effecs
css buttona
👍🔔
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.
🥺
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 :)