Can I Create This Tricky CSS Button Animation?

By recreating this, I remembered one video called “How to create performant css animations” by a cool guy who explains web dev simplified. So I decided to take another way and try to do that using transforms mostly. Scaling those pseudo elements to make squish, and grow. Also decided not to use the svg container for that checkmark and instead use the same pseudo elements, just adding second animations to them. So one element turns into a green circle and another into a rectangle where we see only 2 rotated borders (forming a checkmark). Mine was 90 deg but I believe with some skew I can match the original one, just haven’t enough patience. And ofc only at the end I noticed the checkmark has its own animation, tried to match it by animating linear gradient for border but wasn’t happy with the result, so I skipped that part. Great video

Hmm hmm hmm hmm...

Can someone tell how button gradually increasing when left and right changed 09.15

Hey Kyle, really love the live coding videos! Thank you

can you make a video on how to add a function to the button Pls :)

In VScode you can Alt + Shift + Arrow-Down to copy a line so you don't have to copy paste anymore

I only understand 30% in this video F

I must say Front end is really interesting

46 MINUTES FOR A BUTTON ANIMATION???

I'll jusy stick to regular buttons

👌🏼love the process video

no

I liked this one animation: squish 500ms cubic-bezier(0.06, 0.77, 0.42, 1.35);

Gracias esta muy bonito el boton 🤩

Wow this makes me really want to dive in and learn front end. It looks so fun and the tools seem so powerful these days!

Thanks bro
I love this way of learning , it's very helpful and effective

instead of changing to display none, you could have changed the height and width to 0 and give it overflow hidden

Great video

That was amazing, I would be curious to see the same but with js, not only css. That would be complementary imo.

46 minutes of pure gold content, thank you for making these animations in a simple and understanding way possible Kyle!!

Great work! 🤟🏼

I thought i was on Pornhub, this guy looks like jordi el nino 🤣

So cool!

I do server side code. I find CSS SO frustrating. Your grasp and understanding of it really is impressive. Well done.

“I’m actually gonna use javascript for that”

Impressive. But since you add a custom element for the checkmark. You could have done the same for the after and before elements. The code would probably be more clear?

Why mix em and px units?

you look, sound and speak like pewdiepie

Why the incognito?

Changes background colour to white...
It burns

how is your webpage updating with your code without refreshing it??

I know nothing about coding and I don't know why that video got recommended but I really like it. It's weird how I find it soothing.

Can we just appreciate the time he puts into his videos?

..i love your t shirt bro looks sick !!

Nice Tuts, very informative, but this kind of button is useless, no-one likes to wait that long just to see the result of the form.

This is amazing and very informative!

when you have worked on web long enough that just one look at this you already know how to do it
there are many flavors, canvas, svg, css, js and gif, my only concern is how does it scale in different viewports, and is it IE compatible, its gonna be a headache

Wow. As a back end engineer, this reminds me why I don’t touch front end. Honestly I’m impressed. Good job

Web Dev is a mistake. Delete it

Very cool, thank you.

CSS is so fucking hard.

I stopped watching many of your videos bc your clickbait titles and thumbnails, but content like this was super enjoyable to watch.

Is there a way to redirect to another page (index.html page) after the animation of the button is done? If so how?

No clue how CSS works, but it took 45 mins to do this, and the animation isn't even that crisp at the end?! Damn, that's unmotivating :S

Please Please please 🙏
Can you do React js Nodejs project on the same way that's will be very useful for us.