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