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
university.webflow.com/articl...
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow

[@tosolini]

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

[@thejaysehansen]

Agreed!

[@njengathegeek]

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

[@hamishmaclean1629]

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

[@katymurta]

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

[@NoyumiAo]

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

[@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.

[@billaddison82]

These tutorials are SO well done! Great work!

[@ZombieRofl]

YES more of this basic, yet interesting information!

[@des7638]

"Super Janky” lol. Love you guys

[@shaneisrael0608]

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

[@CharleneDandelion]

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

[@delanyodanga]

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

[@kaleemullah247]

I'm a professional Webflow developer and actually pretty good at it, and I love watching these basic videos. everything about the tutorials is just perfect.

[@SashaMirpour]

Really nice and simple to follow tutorials awesome!

[@donskawin6657]

Nice! The more tutorials for beginners the better :) I’m thinking about giving webflow someday but want to make sure I can do certain beautiful things for clients my developers would do.

[@ChrisTingom]

The ending is hilarious.

[@st3ff]

Thank you brother

[@BlueHawk66]

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

[@ZachlyS]

Damn. That's a nice button you got there, mister.

[@thewebart]

Nice.

[@kaanturkover]

HAPPY NEW YEAR

[@thejohnzapido]

Just a question though, would it be recommended to have a button it it's original tag (i.e button) to make it more semantic? or is using a link block for a button okay, as long as you have the "button" class? thanks in advance!

[@daytonp]

I prefer the margin-right global utility class added to the last button. Either that or using an last-child custom class on the flex container

[@ahyonvlogs]

This design tool seems so promising..

[@AlexLeeds]

Who is this amazing actor?

[@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

[@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?

[@Webflow]

For flexbox, you can't. However you could set a max-width to it or wrap that element with another DIV block that has a display:inline. Hope this helps 😀

[@FerdiCildiz]

@@Webflow Thanks but in the example it doesn't expand so I couldn't get it. I had to set a width. Thanks :)

[@thejaysehansen]

I do wish that hide edges icon was still there. Very hard to find and use it deep in the canvas settings.

[@LivakProductions]

How can I add a document file to a button, do I need for paid plans to do this? It would be great if someone could help me.

[@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

[@Webflow]

You can add an icon as SVG code and change the color on hover. This tutorial may help you with this: kzbin.info/www/bejne/qZPdiHZviN9leqc

[@garyvoigt321]

Dylan! You are lucky Grimur isn't there to rain fire down on you. 😉

[@Antec76]

How can you create a custom submit button like this? I want to have a submit button with an arrow but you can’t add an image into the submit button component.

[@njengathegeek]

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

[@Webflow]

You can find that option in the canvas settings at the top of the Webflow Designer UI. Here is a screenshot that may help: share.getcloudapp.com/P8u1OoDZ

[@njengathegeek]

@@Webflow Thank you, I have another question too, Canva size is changing based on my zoom, I there a way way to work on a fixed canva size i.e 1280 only or 1920 only just like the design I exported from Adobe Xd. Like now am designing on a canva size of 1070 😂😂

[@astedroid]

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

[@tratincica2211]

Image swap on a button?? Where can I find a tutorial on that?

[@shubhamparekh9808]

Sir can i have connect the database in my website Sir please help me it's my humble request to you.

[@nuke7]

I don't see how this is easier or faster than coding with a framework in a good IDE like VScode...

[@rishid2920]

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

[@stevend2748]

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

[@Webflow]

Hi, Steven D! First, you can only set negative values on margin; values for padding can't be negative in CSS. Second, since padding affects the space inside an element, the practical use case for padding is in the inside of the button; not the inside of the button wrapper.

[@stevend2748]

@@Webflow Thank you so much for the quick reply. You guys are awesome!

[@raynalreyes4907]

This is what the dude looks like haha

[@AlicaKrmac]

Star Trek episode Next Generation!!

[@AndrewChinco]

Dylan, you rascal!

[@apache95]

Im interested in the world domination document McGuire has.

[@alexgetty9868]

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.

[@tunetag7809]

Wow that's cool, wanna be yt friends? :P