Animated buttons and flexbox button wrappers - Web design tutorial

Поділитися
Вставка
  • Опубліковано 22 вер 2024

КОМЕНТАРІ • 53

  • @tosolini
    @tosolini 4 роки тому +83

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

  • @njengathegeek
    @njengathegeek 2 роки тому +7

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

  • @hamishmaclean1629
    @hamishmaclean1629 4 роки тому +65

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

  • @katymurta
    @katymurta 4 роки тому +31

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

  • @billaddison82
    @billaddison82 4 роки тому +22

    These tutorials are SO well done! Great work!

  • @NoyumiAo
    @NoyumiAo 4 роки тому +8

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

  • @blomshell
    @blomshell 3 роки тому +1

    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.

  • @CharleneDandelion
    @CharleneDandelion 2 роки тому

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

  • @shaneisrael0608
    @shaneisrael0608 4 роки тому +3

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

  • @kaleemullah247
    @kaleemullah247 4 роки тому +1

    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.

  • @des7638
    @des7638 3 роки тому +1

    "Super Janky” lol. Love you guys

  • @ZombieRofl
    @ZombieRofl 4 роки тому +1

    YES more of this basic, yet interesting information!

  • @delanyodanga
    @delanyodanga 3 роки тому

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

  • @ChrisTingom
    @ChrisTingom Рік тому

    The ending is hilarious.

  • @BlueHawk66
    @BlueHawk66 4 роки тому +2

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

  • @ZachlyS
    @ZachlyS 4 роки тому

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

  • @donskawin6657
    @donskawin6657 4 роки тому

    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.

  • @SashaMirpour
    @SashaMirpour 4 роки тому

    Really nice and simple to follow tutorials awesome!

  • @niccohirajeta
    @niccohirajeta 4 роки тому +2

    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

  • @thejohnzapido
    @thejohnzapido 4 роки тому +2

    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!

  • @FerdiCildiz
    @FerdiCildiz 2 роки тому

    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
      @Webflow  2 роки тому

      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
      @FerdiCildiz 2 роки тому +1

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

  • @njengathegeek
    @njengathegeek 2 роки тому +1

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

    • @Webflow
      @Webflow  2 роки тому +1

      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
      @njengathegeek 2 роки тому

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

  • @daytonp
    @daytonp 4 роки тому

    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

  • @st3ff
    @st3ff 4 роки тому

    Thank you brother

  • @astedroid
    @astedroid Рік тому

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

  • @kaanturkover
    @kaanturkover 3 роки тому

    HAPPY NEW YEAR

  • @AlexLeeds
    @AlexLeeds 3 роки тому

    Who is this amazing actor?

  • @thejaysehansen
    @thejaysehansen 3 роки тому

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

  • @ahyonvlogs
    @ahyonvlogs 4 роки тому

    This design tool seems so promising..

  • @rishid2920
    @rishid2920 7 місяців тому

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

  • @VolodymyrSymchuk
    @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
      @Webflow  Рік тому

      You can add an icon as SVG code and change the color on hover. This tutorial may help you with this: ua-cam.com/video/sbzWC9Sz2DE/v-deo.html

  • @Antec76
    @Antec76 3 роки тому

    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.

  • @LivakProductions
    @LivakProductions 4 роки тому

    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.

  • @thewebart
    @thewebart 4 роки тому

    Nice.

  • @tratincica2211
    @tratincica2211 3 роки тому

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

  • @garyvoigt321
    @garyvoigt321 4 роки тому

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

  • @stevend2748
    @stevend2748 2 роки тому

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

    • @Webflow
      @Webflow  2 роки тому

      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
      @stevend2748 2 роки тому

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

  • @AlicaKrmac
    @AlicaKrmac 2 роки тому

    Star Trek episode Next Generation!!

  • @shubhamparekh9808
    @shubhamparekh9808 4 роки тому

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

  • @nuke7
    @nuke7 4 роки тому

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

  • @raynalreyes4907
    @raynalreyes4907 4 роки тому

    This is what the dude looks like haha

  • @AndrewChinco
    @AndrewChinco 4 роки тому +1

    Dylan, you rascal!

  • @alexgetty9868
    @alexgetty9868 2 роки тому

    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.

  • @apache95
    @apache95 3 роки тому

    Im interested in the world domination document McGuire has.

  • @tunetag7809
    @tunetag7809 4 роки тому

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