Animated buttons and flexbox button wrappers — Web design tutorial

A button is an element that links to pages, page sections (anchors), external links, emails, assets, and telephone numbers. In this video, we'll teach:

Steps in the video:
00:00 - Introduction
00:38 - Basics of the button element
04:38 - Button states, like hover
06:21 - Animated transitions
08:48 - Using multiple buttons
11:21 - Custom buttons with icons

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

----------

[tosolini]

I often find more gratifying watching a few Webflow tutorials than a Netflix movie

[CharleneDandelion]

thanks for adding that subtle humor, it keeps me in check if I'm still focusing haha!

[njengathegeek]

Guys let's have a meeting. We need to agree that this guy is the best instructor on YouTube.

[rishid]

can we get a detailed video for watching an episode of starwars new galactic using a button???

[astedroid]

4:48 B.B.BUTTON STATES??? THAT'S WHAT I'VE BEEN LOOKING FOR ALL THIS TIME???? 😭

[stevend]

10:21 can someone explain why *negative margin* was used and not *padding* ?

[des]

"Super Janky” lol. Love you guys

[FerdiCildiz]

I love this guy's narration and I've foudn what exactly looking for!

Edit: When I change the button to flexbox, it's stretches 100%. How can I set width by content?

[hamishmaclean]

I can’t see the Star Trek episode option. Is that only on the Enterprise plan?

[blomshell]

I don't even need to learn this stuff but I can't stop listening to this guy. It's borderline hypnotic punctuated with witty zingers. So well done.

[njengathegeek]

May I ask, are some features only available on paid plan, like star trek, hide element edges... I can't see them

[katymurta]

I love these tutorials and the HUMOR! LOL. You guys should start your own comedy-based tutorial school....

[BlueHawk]

Thanks
Thank You Much It Helped Me A Lot For my Website For My Channel

[NoyumiAo]

This is the epitome of tutorials, thank you so much for all these tutorials Webflow!

[VolodymyrSymchuk]

Great tutorial! I'm struggling with creating a button with an icon and having both text and the icon a different color on hover. Does anyone have a solve for that?
Thank you

[billaddison]

These tutorials are SO well done! Great work!

[shaneisrael]

Absolutely amazing tutorials that keeps you going, the humor is too GOOD, HAHAHAHA

[alexgetty]

Um, a button is not an element that links to pages, page sections, external links, etc. That's called a link, and it's a totally different element.

[delanyodanga]

Awesome tutorial saved me a lot of time on a simple animation

[niccohirajeta]

I prefer using a grid parent div as a button wrapper for multiple. that way the buttons have no margin and it's all controlled by the parent