7 Button Effects in Webflow

[Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] [Music] No hello happy Saturday everyone how y'all doing oh man was a crazy week for me but before I get into that hope you're all doing well hope you're all staying safe and keeping those masks on when you go out into the public or essential needs like groceries and stuff like that yeah so um yeah checking in with you all let's see was in a chat room right now we have 16 people nice alright welcome stop that here we go uh let's see who's in chat we got travel adventure welcome back John I think you're new here welcome Scott is back hey Nelson how are you I'm really looking forward to today's topic yeah decided to go I was like doing very advanced stuff and just experimenting for the past two streams doing the Apple Big Sur preview landing page it was tough I thought it was gonna be simple for me like okay it gonna be straightforward thought about in my head and that's what I like to do I just like to think about in my head and then just go for it and just explore see if it's possible and it was tough those last two streams were tough but today we're going back to the basics and doing some button stuff but different button styles so yeah I'm looking forward to it too Russell welcome back HG web design yes welcome back from Holland yeah where are you from where are you all from whoo Neil's back Joseph's back Mitchell howdy howdy to you ripple effect is back Colleen thank you thank you so much Colleen as always thank you for moderating but also each week whenever you're here you're donating to my coffee page so thank you thank you so much so I'm gonna put that link in chat if you want to help support the stream donate a cup of coffee that would be swell so cheers to you Arlene hmm yeah coffee cup it says never forget me and then the other side says which is true you need me yeah who else ishere wrestles back my daughter was in camp no code this week she had a blast yeah I wanted to I want to talk about that before he gets started I'm glad your daughter got into the into the camp yes it was fun and oh yeah man Mitchell I love button stuff John Amsterdam Costa Rica nice we actually have a web flow or he works in QA he yeah he's in Costa Rica oh I'm one from Switzerland here yeah that would be Hg annoying I don't know who's in Switzerland yeah and Raj is from France so welcome everyone and if you're in the and if you're just watching you don't want to chat in the live chat that's totally fine as long as this information this knowledge that I'm giving out to you all helps with your day helps with your career and you know all I ask is that you pass this knowledge forward to someone else that's it Thomas is back what's up what's up to you yes okay so what happened this week camp no code and camp no code actually let me go to the landing page real quick for camp no code see your camp - no code that point yeah so um for the past week we did a free camp no code summer camp for kids ages 10 to 16 it is amazing it was amazing what these kids were able to do at the end of the week we had a large breath of knowledge of web flow in the hole with the students some didn't know didn't even go to web flow comm ever before didn't have an account some had their parents who already used it for their day job some have heard of it but never really dabbled and so it was fun to see what they can learn and do and what we did on Monday was just create a simple button with a quick effect but trying to teach people in one day I mean each day was just a four hours a five-hour session and trying to teach the concept of HTML and CSS in one day and they were able to get it was like wow that's amazing and and then second day teaching them interactions we just went straight into it like okay now that you've learned how to create a hero button now that you've learned how to create a hero row now let's go straight into interactions where it's basically teaching them JavaScript that was it was crazy and they were able to get into it in in by the end of the week they were creating full-on web pages for their either make-believe or real service or make-believe or real invention I what I remember is some people had some is had pages talking about bearded dragons or pokemon cards so some one student already had a had a site built for her and her sisters a Pet Sitting service so that's cool one was talking about animal shelters another was already selling a service a one-on-one private lesson on how to serve solve Rubik's cubes and he integrated calendly so people can book his time like he didn't like well he looked like he was 12 or 13 and I'm like oh let's go well I am I was so empowered and inspired by them being inspired to take the next step and hopefully you know in a year hopefully we hear from them or at least some of them and they already got angel investors and just kidding but right that would be amazing you know like when you throw this pebble into this still lake what will happen with the ripples a year from now you know how much how much of this knowledge that they just started off with what how is that gonna affect their life and I hope it affects them in a very positive way and segue to this stream this is why I do these streams this is why I've been creating web flow content since 2013 because I saw web flow back then and I said this is the future of web design I need to tell as many people as possible and I was just so lucky and fortunate to have the CEO contact me and ask me to be part of the team and help with customer support tickets and I'm like yes I want to help people and people are getting it and um yeah that's why I do these streams every Saturday thank you all so so much okay it was a big week fun week and oh and lastly um our VP of Marketing she was so so happy she even tweeted that she ugly cried after seeing all the the the kids web sites oh you know it's amazing amazing what this tool can do for lives so yeah Russell i I really want I would love to see what your daughter does with this knowledge going forward and I hope that it continues to inspire her each time I mean inspires me whenever a new feature comes out and that's why I get super excited all right done with that um what are you doing to we are well making ten different button effects and I didn't practice any of this I didn't have time but I like to challenge myself I like to use web flow like a video game like and I do this and I just like twitch streamers or whatever um or gaming streamers I just go at it and I tell you what I'm doing and hopefully we all learn together so I have eight button I have eight button styles that I've wrote down like an hour ago and I'll give the last two to you the chat to come up with ideas I think it means sneeze cool I muted alright alright so yeah I have eight written down haven't done them yet but I haven't thought that yeah maybe I can do it and then the last two I'll let you challenge me to do a different type of button and of course you can clone this I'll add the when this stream is done I'll add the project link the cloneable project link in the YouTube description so you can take it reverse engineer it copy buttons and put it into project or your into your client projects or your own your own website projects so you can just use it right for free Thank You Carlene for linking the the ugly cry tweet from our VP of Marketing yeah the whole team was was super super inspired by all the kids of that during the camp but be here anything else from chat let's see here kids learning z-index yes kids learning z-index they were learning XY and z axises on the third day okay we have a question from erickson do you think live streaming of creating websites in web flow is is a good any good tips or advice oh I'll take that question right now yeah throwing out knowledge for free is always a good thing you know even if you're creating one section or just the navbar and customizing it live stream it or make an edited version of your live stream whatever you want to do as long as you're throwing out knowledge out there for free it's not only good for everyone it's also good for you because it's a way for people to see you as a master of the craft to me I'm not a master of web flow I'm just clicking buttons as many times as I can since 2013 and so I feel like there's people who there's so many people who do it better than me it's my co-workers there's some that like do some crazy stuff with custom code or crazy stuff with interactions and I'm like wow you're a master umm but yeah if you do it there's no harm in doing it's a good to me it's a good thing as far as tips are advice it's kind of an expensive thing I finally got my setup exactly how I well almost exactly how I want so thanks to the pixel geek community you've all donated over yea over $700 in the coffee fund which I put back into the stream so now that now the stream is super smooth so I can do transitions and in the stream doesn't cut out because I'm using a PC that I custom-built down here that's doing the stream while my macbook is doing web flow stuff and thanks to you all I'm able to do that so me you would need a good piece streaming PC you would need a stream deck then you need a good mic and then two lights I have two lights happening right now and yeah yeah what's happening and it's kind of crazy here's my setup I'll show you my I'm using two keyboards one for one for the streaming pc and then one for my macbook well it's kind of intense shame there's no camp no code for adults well this is kind of like it and I was thinking too maybe maybe I can do a a five maybe me and Kyle I don't know me me and Carlene do a camp no code but pic for the pigs will geek community from start to finish of like you know building understanding HTML and CSS like that's day one all the way to day five of you have a full ecommerce site done yeah maybe we'll see sounds like a good thing all right let's do this hello James from Peru Nasser welcome welcome if I missed your name I'm sorry but let's get into it making ten buttons in an hour okay the first one I wrote down is colorful oh okay here we go so what I have already is I have a grid a 5 a 5 by 2 grid alright and inside of that grid I have a bunch of divs locks that have flex and they're centered so you can see right here flex enter sensor enter center so that way buttons and any other child elements will be in the center all right so you might be thinking okay web flow already has a button element so let me drag that in and to you kind person I would say this is not the way to go about it if if you want something customized because what this button is it's already a pre-styled link block with text inside of it you can't really customize it to do different things the only thing you can customize is the hover effect so let me give you example we'll call this button one and we'll will say we'll say a transition a background color and then on hover will change it to a darker blue and then that's it and so if I preview this is what it does nice and basic I mean it does the job when it comes to a UX point of view does it but if you want to like make it a little bit fancier got a customize this thing so we can't use the pre pre styled webflow button we got to go use a link block so let's go ahead and do that so I deleted that add elements panel and where's my link box right there this link block I'm gonna drag that in and there we go so this link block it looks like whoa what happened oh this link block there you go looks like this I preview nothing because I didn't do anything with it I have to style it I have to completely customize it so in this link block we're gonna call this button one actually you know let me delete the style real quick clean up there we go all right so this one is called button one and if you have any questions while I'm doing this Carlene is making a note of your questions and I'll answer them at the end of this tutorial so here we go so I have button 1 and what I want to do is actually let me show you example real quick button effects there's like here we go here's actually one doing yeah so I'm doing sweep to rain so we're gonna be doing this as you can see the button fills but you can't do that with the pre-styled web flow button so you have to do it from scratch so we have the button right here and what we're gonna do is let's go ahead and add some text inside of it so I'm gonna add a text block I'm gonna call this button one and then this button one I need to set the typography and set no underlying so this is how you remove the underline boom right there under text decoration and then I'm going to make the button color or the font color black and there we go and now I need a style this some more I need to give some padding around the button make it like let's do like that there we go and we'll give the background color gray all right more space on the sides i'ma leave that all right cool we can make it a pill if we want with border-radius there we go okay so now we need to make a color that swipes in from the left and goes to the right to do that we need another layer we need a colored layer inside of there so or a colored div block so what I'm gonna do is set this to position:relative add another div inside and we're gonna call this background bill color you name it whatever you want we're gonna give it a color of there we go just pick any color you want and here's the trick I'm going to set the position of this to absolute and then set it to fill to fill the whole thing okay and wait is it no it's not that okay so this doesn't have the rounded corners and it's on top of this text block so this text block I need to push it above this and the reason why this is on top of this is because it's using position absolute absolute is a way to make elements float on top of each other and if you need more information about CSS positioning I have a youtube video all about that it's a five minute video and it will help you understand static relative absolute fixed and sticky all right so let's put this text block on top of this background so I'm gonna call this button label and I'm gonna set the position to relative Z and X 1 and now it's on top awesome okay so now to make the button background fill color rounded I need to do some masking so anything that goes beyond this button needs to be cut out so you can do that with overflow:hidden right here I'm gonna cut everything out and there we go we have the rounded corners so our HTML and CSS is done now we need to add the animation the web flow interaction to make that swipe from left to right and back so this is what we're trying to achieve with interactions so it's just gonna go like that then it's gonna go in like this like that okay so simple all right well let's do that with interactions I'm gonna go to button one so the reason why I select button one first is because if anyone hovers over this button do something with its child elements okay so this is the parent and these are the two children let's go ahead and add an interaction right here at the top right press the plus mouse hover and we're going to create an animation to press + to start a new animation gonna call it button 1 and now we're going to set the background fill color we want to effect the background fill color and we want to set that to move okay so when I set move I'm going to scroll down to the bottom right and I have all these new options for now when the page first loads the initial state right here when the page first loads I want this to be negative 100% of itself so I'm using percentages I don't I don't want to use exact pixels because it's easier with the percentage so we're gonna start out when the page first loads the background fill color is going to be negative 100% of itself and then when I hover I'm going to set another move when I hover it's gonna go back to its original state which is 0% okay and so for press play it does that but it looks kind of janky it looks like you need more needs more ease and so I'm gonna set the ease from linear down here I'm going to change linear to something more soft like let's just do ease that's basic ease so if I preview there we go but if you notice I hovered out so I'm gonna hover in but if I hover out and nothing happens because we haven't done the hover out effect yet I'm gonna try it again hover but hover out so the hover looks good but if you notice one more thing with this example the color of the text changes from black to white or gray to white right so we can do that too let me go back to web flow and for this button label I'm gonna select button label and at the same time the background fill color moves I'm going to set a text color okay to that button label I'm gonna go here to the bottom right and I'm gonna choose a different color choose white and there we go it changed to white so if I press play there we go and notice how notice how the changing of the color of the text is going at a different rate than this fill color that's because they're in two different eases so background filled color is using ease while that button label is using the old because I'm sorry the default linear so I'm gonna change this to also bees and now both of them are going to go at the same rate let me zoom in there we go super smooth alright now we need to do the the opposite now we need to do the opposite so for my mouse hover I've done that now hover out I need to start another animation now instead of building that animation step by step but going backwards it's easier to just duplicate that animation and just delete what you don't need so I'm gonna duplicate that going to select button two and rename it button one hover out and now I'm just going to let's see here I don't need this fill color to move back to 0% I needed to move to negative 100 so I need so I can delete that step and this one will not be an initial State right so this one is just making the fill color go back to the left and at the same time I want to group these two so they can happen at the same time and the button label goes back to black and that's it so if I hover over in however out that's it let me zoom in real quick over in we're out you know when you look at a word for so long it looks like you've misspelled it like the word though you keep looking at the word though that's what's happening with button right now I spelled button right right I will see you spell but yeah my god alright zoom in/out 20g what's up back at it again yes I am thank you for being here thank you for coming back I appreciate you so yeah that's how you do it and um you know you can change your background fill color to whatever you want if you don't want a solid color you can even do you can do gradients like um oh one of them one of the students from the camp no code was playing around with ingredients so much and made me so happy when you see people experimenting a web flow even even if you know that it's not gonna really be used on a production site it's still cool because it's like that's your world just mess around as much as you can and break things and you'll learn something if I preview this there we go I feel like there's no ease on the hover out I feel like something's wrong let me fix this let me double check up I was right a background fill color doesn't have a ease when I hover out I'm gonna set the ease done let's go ahead and check it out again yep there goes much much smoother yeah that's up to you what you want to do what do you want to do with your buttons all right number one done let's go number two um let's see here I'm just gonna copy this and paste it and then I'll just duplicate the class oh I don't want a interaction on it oh I put try the google circle yeah okay I challenge myself a lot okay all right let me set this up real quick and we'll go ahead we'll set this fill color to something solid you I'm changing them both oh no duplicate the class color too let me set up my HTML and CSS real quick before I start teaching we get dark like that okay and then we'll you know we'll just leave it as oh ace okay cool all right before I be get into this one let me see when we look at chat am I missing anything actually let me we pull up that doc that me and Colleen refer to have to go find the doc is it live screen question all right okay from Tom does web flow practice version numbers like WordPress five point no we don't have version numbers just whenever well the only version number I guess is interactions cuz like this is web flow we call it I X so this is IX to the interactions but all the other features we don't give it version numbers now James that's from our few that I would like to know how to not repeat a CMS element that is already on the same page okay yeah we'll get into that at the end um oh I need to remind myself about that one David I would like to know how to control the current state of a menu item okay yeah we'll get into that one too but both of those I'll get into that later um chat right cool goat going back here we go so the Google style button where it's like when you tap on something and then a circle explodes from where you tapped I'm gonna challenge myself to do that and see if that's possible maybe maybe not I don't know we're gonna try so here's what I'm thinking so you have this background fill color but it's actually like for example a circle so to make a circle you near the equal width equal height I put 25 25 and you set the border radius to 50% and then you have a circle and so what I'm thinking is in webflow follow the mouse wherever you are on the x and y while hovering over this button right and then and then wait let me put it back and then when you click it explodes and so it does something like this it goes boom Wow I'm making a move because I have to do oh I need the origin to be mmm hold on I'm figuring this out as I go and then I'll teach you once I figure it out is uh is it like this hold on hold on hold on I want to make sure that notice I was just going to the bottom right I don't I want it to be ought to expand from the center of itself why can't you do that [Music] elf perspect don't know what I'm doing I'm just clicking if anyone knows I wanted to know huh maybe you can't do this one thing I wanted to expand from where it is like it's Center I wanted to do is it because this is it because it's position:absolute huh maybe well uh I skip this one and go back to it I guess this is super advanced right now even for myself all right let me hip it and a little the next one we'll try to we'll try to do it towards the end all right what am I doing here what am i doing okay so my third one I have is drop shadow and glow and I learned this from McGuire which is using two box shadows to make it look like it's um like a pillow effect well let me show you this div block we can give it a background color like something like that and then this base style let's give it a white color and so with drop shadows it's gonna be pretty cool because you can make it seem like it's like kinda coming at you but then when you hover it comes at you more okay so let's go ahead and play around box shadows so box shadows are down here under effects I add one it adds a really janky looking box shadow but you can mess around with these so let's say let the blur be a lot and play around with the size something like that at the distance be something like that so a seven-eleven negative one is what I'm using and then make this more subtle there we go so opacity on the black would be where the alpha would be 333 and then what I learned from him is you add another one to the top left so this is the bottom right so we add another one to the top left and so I'm gonna add one this time instead of black I'm going to use white and then the degrees I do it opposite yes think it's negative 135 we'll see it's at the distance Oh nope do it right here there we go we'll set the distance here blur I don't think I can see white much has to be a lighter color than what we goes and then the size it's like a pillow effect very can you all see it maybe I should make this yeah let me make it yeah hmm white and then this background color let me make it darker okay there we go now you can see well this color so yeah just play around with two of these so if you have two of them you can have like like a light shining from from the top but it's shining from the top left does this make sense hopefully so I'm gonna do it like this let's make the size I'll make the size zero actually we'll do negative three so what you can do with this is you have these two box shadows and then on hover so all you have to do is at the top right on over just change the Box shadow be something bigger and blur it more okay and then go back to your none state and add a transition so this is what makes that animation happen instead of just on and off you can add a transition and we'll choose box shadow and then there you go very subtle maybe I should make it darker to of the hover mmm to change this to be darker something like that oops you get off of hover there we go there we go something like that alright change the width and height not scale thank you Wakanda oh thank you for Conda I'll try that on this third button all right so that's drop shadow and glow so we have this we have this it's coming out wool right let me grab this button put it here all right we're gonna try that Google thing button 3 let me set this up well this is little color 3 and we'll set this up to be like that base style button label okay so what Wakanda is saying is instead of instead of instead of using scale use the width and height so let's try that I'm going to leave everything as is okay which is making that background fill color making it a circle okay so it's 25 and 25 on the width and height and the border radius is 50 now let's make this circle follow our mouse all right so I'm going to go to button base style remove that Mouse hover from button 1 and let's go ahead and add a new one mouse hover and call this oh wait nope I think I did the wrong thing we want to do mouse move over element that's the one because we want that circle to follow our mouse I'm gonna click on it and play mouse animation there we go button three and what I want to effect is this background fill color at 0% I want this to at zero percent of the button I wanted to move to zero percent and then here I want to move to a hundred percent okay that's a hundred percent of itself so I have to use pixels I think I have to use pixels I don't like it oh well let's use pixels then so zero pixels can email it should be like if my mouse is all the way to left it should be like right there and if my mouse is all the way to the right it should be like right there I'm like that I'm looking at before the center of that circle and then on the Y just do the same thing I want it to be if my mouse is all the way down there oh please ear if my mouse is all the way to the top I should put it oh I did backwards darn it there we go so at the very top of the button which is 0% my mouse should be there and at the very bottom of the button should be the circle should move there so if I preview yep there goes now it's following there we go that's what I want I wanted to follow me sweet now that it's following now that it's following um eh I hope this will work um let's go ahead and close this because that's all we need so that's all we need so it's following me now I have to make another element trigger for the hover okay so is it hot no or the mouse click there we go for the mouse click so when I click it expands okay so let's go ahead and do them a mouse click start animation create a new one called button 3 and this is going to effect this circle and I'm going to not scale but you width so size and so when I click on it the width let's just say the width and height goes to something double the size of the hint the whole thing so 300 by 300 and there we go so it grows Oh 200 by 200 no I can go smaller yeah we can go 100 by 100 so it grows to that see what kinda it's it's still growing to the bottom right but we'll keep going and see if this works I'll change the ease to not be linear but let's just try one of these there we go okay and another thing that those Google buttons do is like Google material buttons is it starts opacity zero and then it becomes like something like 50% and then goes back to zero okay so that's what I'm gonna do let's add an opacity to this and we'll set this as initial state so when the page first loads the initial state of this is zero but when someone clicks the opacity of this goes to something like 50 and we'll try 50 and then very quickly it goes back down to zero Oh does this okay and it's very linear though so again I have to fix the ease be the same I think I used cubic yeah out cubic out cubic let's play and it looks like it's step by step so I'm gonna put this with that but set a delay to be like point two or something that looks bad can we do another delay like point four that don't look good let's try putting it back right I guess maybe this duration needs to be faster hold on hmm what about changing the origin point yeah that's what I thought that's what I was looking for when I was first building it on the button too but we're just gonna keep trying this doesn't feel like it but I'm just gonna keep going that's life all right so let's see I've done that let's see what it looks like and it's probably gonna be janky but right so since the opacity is zero you don't see the circle but it is following me and now if I click it looks like crap oh I need to reset the size to let me reset the size yeah one more thing so after opacity goes down this the the size of this I'm gonna duplicate this size of this resets down to 25 25 okay well let's look at that Genki nests and click oh how do you get it into the center there's a challenge for anyone who wants to take it um at the end if someone could teach me or like maybe in the next stream come back and show me what am I doing wrong with button 3 or here actually here's the read-only project here's a read-only link I'll put in chat you want to mess around with it go for it changing the origin point that's what we thought let me try this again the origin is default 50/50 though that's why I'm like what's going on ah okay well there's the start of that all right number four Android from center pill now that I'm second-guessing myself if I know how to do this so there's web flow buttons no sorry there's Android buttons that start from the center no matter where you click and then it fills from the inside out does this example does this have it like yeah kind of like no I want a rectangle kind of like that hold on one of these Oh kind of like this kind of like this well let's do that and see if I fail and if I do I'll learn from you all well let's try it button for let's set up our HTML button for Phil color will call this fill color for and I don't want a linear gradient I just want a darker one there we go and so this is is it because they don't have okay yeah well thinking hold on oh hey hold on coming to me okay yeah so this one is set it up you need no I'm doing the steps in my head the absolute the center I need I need this button I need this fill color to be in the absolute center I need to wrap it okay yeah I do rabbit alright here we go so here's how to do this what I'm trying to do is I want a just rectangle that starts for the center that's like a thin thin line but you can't see it and when you hover then the thin line expands from the center to the edges and fills up the button with the color and then the opacity goes away so it's like boom fade away here we go so this I'm going to set back to position static and I need to wrap this with a flex so I'm going to add another div inside of here we're gonna call it button for background blacks all right I'm gonna put that background color inside of it and so this is what's going to be position absolute full and flex centered right so this right here with the Flex it's stretching its child element which is our fill color stretch the the full height 100% height of this flex wrapper and then I'm going to justify its center so it starts at the center okay and then watch what happens if i take this background fill color and we have that background color right here right now the width is auto and it's being collapsed in itself so it's Auto zero right now it's at zero pixels but if if I do like zero percent and then when I hover it's gonna do this see how it's growing from the center on out and so that's what we're gonna do on hover and with animation and without holding the up button on my keyboard like oh okay cool so let's do that yeah I can do it so my HTML and CSS is set up so let's review before I get into the interactions I have the actual link block I have my button label that has a position:relative so that way has a z-index that goes on top of the background fill color and then this one I have flex which is stretching its child elements to the top and bottom so it's a hundred percent width and height very 100 percent height and the width is going collapse all the way to the center until it's 0% 0/6 all right so and then my actual fill color right here is a position static and it has no size all right let's go to interactions all right on hover let's go ahead and start animation call it button 4 over and I'm going to affect the background fill color and we'll have that size and we'll start easing now let's go ahead and set out cubic with is 0% so its initial state oh yeah so its initial state will be 0% and then when I'm hover over it when I hover over it the ease is going to be out cubic the width is going to be a hundred percent and so it looks like this happens really fast cool so let's preview and there you go oh all right so here we go let me zoom in oh there we go cool now we just need to do the opposite let me press done or done with the on hover let's go ahead and start animation for hover out and again we can just click on the kabob menu and click duplicate click on that and we'll rename it hover it out and we don't need the hundred percent so I'm going to delete that and this one we do need so I'll go turn off initial State change the width to 100 I'll leave the width to zero percent and change the easing Oh easing is already yet out cubic all right so when I hover in it goes from 0 to 100 when I hover out it goes back down to zero percent done okay and there we go OOP there we go and I I can even make it fade out too so let me do that let's add a fading out so at the same time this background fill is happening this opacity oops the opacity of the oh where to go background fill color the opacity is going to 0% okay well let me go here and it didn't happen that's awesome oh it's hover out yeah and go but we don't see it again because we need to reset the opacity on the hover in well let's go that Oh let's reset the opacity this one goes to opacity Oh No opacity of the background fill color will go down we'll go back up 200 all right there we go so let's and there we go yeah yeah cool four buttons done hey Mitchell I went out for a sec and come back to see these beautiful buttons oh thank you welcome back let's see here what kind of saying Adam move animation to recenter it when you tap maybe play around with my project and let me know if you figure it out I would love to see what you do I would love to learn from you all right moving on button 5 let's copy the first one place it on the fifth area okay ooh changing SVG fill color current color yeah yeah all right let me set up my HTML and CSS let's do that yeah my base style my button label my fill color it's change the field color 5 means the fill color to be purple do that um actually we won't have a button label let's put an icon ah okay so here we go so where I usually get free icons is over at flat icon calm and you can sign up for a free account so you can download these SVG's and whatnot so let's look Wi-Fi I don't know Wi-Fi it's a simple one all right um which one looks good you do no I don't want to go premium thank you so much mmm so if you see a crown like this that means you have to pay for it ok we'll do this one this one's nice alright so you have to register and download let me go ahead and log in real quick mmm come on login ok I'm back here oh there's a whole pack cool I want this one and I want SVG free download and must credit the author so who's the author I don't see the author but thank you author or this alright so I have my SVG there and hold on real quick let me open up a text edit and open up a text editor will real quick okay cool see if this works alright um so I downloaded SVG you would think okay so what I'm trying to do is when you hover over an icon when you hover over icon inside a web flow change the icons color at the same time the background color changes or fills or whatever but you can't really do that with images inside a web flow so here's what you need to do uh so you have to actually get code okay I'm gonna drag my SVG into a code editor like a free one like sublime let's see if this works come on didn't work uh-huh there we go cool so you drag in so this is what SVG really is it's just code all right I don't know what this code I don't know how to type this code room scratch but what it's doing is it's all these dots and points and whatnot and that's what's actually happening happening inside of your SVG it's actually code that's why SVG's looks so much cleaner for icons than PNG s and JPEGs because SVG isn't a rasterized image it's just a bunch of code and so you can expand it collapse it like shrink it it'll be clear no it'll be clean no matter what so right so what you can do is copy all of this all right I'm gonna copy this and gonna delete my button label where did well delete my button label and add an embed and paste that in there right if I save them close I should have seen my oh this needs to be positioned up relative there we go the index one alright so now I see it alright but I don't want a black I want a white so you might be thinking alright it's simple enough this color is black so just change it to white why isn't it working well that's because this code actually comes with its own color and it's probably at the front so enable background color i enable background I don't think that's it I don't know where the color is but what you can do is add a style tag so style ending style and this has an idea of whatever that means I mean I can change it to Wi-Fi icon so this has a name of Wi-Fi icon so I can say Wi-Fi icon fill equal is current color and again you don't have to memorize this you can just copy this from my project and do whatever you want with it but yeah so current color and this should do it they've them close yes and now I have full control over its color ha ha ha there it goes so I'm gonna start out with black and you know what this needs to be smaller let's go ahead and set it to like 25 yellow I can't see it 50 50 how come I can't see it what happened no I was feeling so confident come back to me is it because of you hold on I'm sorry for what I've done please come back oh you're low wow I guess I have to set the actual size of the hold on so not only that let's say with is a hundred percent of its parent and the height is also a hundred percent of its parent oh because right here there's a height well if I delete that from the actual SVG oh and there's a whiff a here too okay cool so delete that both from you ha ha now I have control yes okay all right so sometimes you need to make sure that there's no HTML sizing happening okay there we go there we go cool so now I get to go ahead and play with interactions so when I hover over this the when I hover over this we can have the purple color slide in and the purple color slide out on hover out that at the same time the text color it's basically the same thing as button one but with SVG that's a that's the trick so let me just use the same let me duplicate the same interaction as button one let's do that obey style interaction mouse hover select button one I'm going to duplicate and it named it button 4 okay so I'm going to call this button 5 so it's background fill color actually I want it background fill color change target I want it to be this one a cool so background fill color and the button label this is not button label I'm gonna change target and do the HTML haha there we go if you didn't know you can right click and then change target and then click on whichever other element you want to effect all right and so that way you don't have to build stuff from scratch you can just duplicate that one's done and for the hover out aren't animation I'll duplicate hover out and change it to button five over out and right-click change target boom and then right-click change target oh I'm done boom yeah we did it well button five in the books at 15 minutes or so left for five more buttons I don't know if I'm gonna be able to do it maybe I'll rename this title to the title of this video to be whatever I get done with so let's go in number six there we go um oh my god game changer so you can't do that with SVG so yeah you cannot just upload this SVG into web flow because web flow will just take it as an image you need to find the code that that is inside the SVG and then copy and paste that into web flow and then when you copied into web flow you have to make sure that two things that we learned is one make sure that you change the ID to something different and then or more relative yeah more relative and then more relatable and then you add a CSS inside of it saying hey the fill color is going to be whatever current color is whatever current color the parent is so the parent of this SVG is this embed wrapper and so I gave that embed wrapper to change the color of the embed wrapper from black to white and so now I have control over it plus we need to make sure that the width and height is a hundred percent of its parent which is the embed wrapper and make sure that in the HTML of the SVG we removed any width and height so these three pieces of CSS is giving us more control over IC over our SVG rather than just using it as a regular image right number six let's go for it six what did I write down button and icon oh yeah so where did I find it I saw this one right here nope that one I thought that was cool yeah so like you hover and then the button label goes down and then the icon goes down and then you hover out so that's simple let's go for it let me instead of button that one I already have a icon here so let me just copy and paste that I can oh let me also copy paste button label I'll call this Wi-Fi and we'll set this to be alt text to be centered and caps and bold and wait wait wait hold on did I do it right hold on what's the doom god mode code there it is iddqd so if I do did I do it right mmm button label hope I didn't do it right let's try it again mmm iddqd yes I did it ooh new subscriber thank you so much [Music] there you go oh yeah hmm all right I need this to be Center as well there we go cool all right so right now we just have this but um I don't think I need background fill color we'll just use this as a different color let's go there we go oh you don't see what I'm doing um let me move this over to the there we go cool all right so that's what I'm doing let's alright so I want to cut off this word and actually you know I want to cut off this I want to push everything up so what I can do is let me give this button label combo class and move it away from that and let's see if we can make this dinner right because we have overflow:hidden if I set an exact height this will cut off things that go beyond it so let's do something like that and so what's gonna happen is I can wrap these two together in a div and the this div is what's going to be moving up and down rather than moving two things separately up and down I'm gonna just move both of them at the same time with interactions oops with interactions like the whoa it's glitching okay there we go uh what happened to you what I have nothing as position:relative this should be moving upwards when I move this div block it should be moving upwards there he goes it's weird so this is what I want it to do okay so let me let me move the Wi-Fi mmm this okay this there we go move away move away all right let me just double check to see if it's gonna work so it's gonna start out like this and then it's gonna move down like this and so yeah cool all right well now that I know that's gonna work let's go into interactions and make it happen so base style remove the element trigger create a new one mouse hover but a new animation and call this button six over and we're going to affect this div block and it's going initial state this shall state of this when the page first loads I want it to be 68 so I'm gonna make sure to copy that numbered because that's what I want the hover out to be but for the hover in I wanted to have initially 68 and then when I hover over it I'm gonna move it back to negative 3 all right and let's make sure that my ease is something different and it's gonna look like this cool now I just need to do the opposite all right animation duplicate 4:6 and call it hovered out deletes I see here delete this one this one is no longer initial state there you go cool wait okay yeah and make sure that my easing again is out cubic and we're good there we go hello Pablo you're not late you're just on time for button number seven well there you go that's but number six can I do seven in six minutes maybe underline left to right oh okay Oh so underlying left to right um that's just the same thing as hold on border transitions so this right here that's just the same thing as the first button we did all right the only difference is uh this is thin the height is thin so let's just do that copy it and let's move this one over to this alright so let me set up my HTML this is gonna be button seven and background fill color seven so here's the difference between this and this this takes up the whole height this one we just need to make it shorter well here's how we're gonna do it we're gonna do position position absolute to the bottom okay and we'll give it a height of like five pixels that's it that's the easiest one we didn't even have to change the [Music] you know I mean change it from a pill to here they style seven it's change this to three for the radius three yeah we didn't even have to change the interaction it's the same interaction as number one the only difference is its underlying but in actuality it's not really underlying it's not even a boarder it's just a short div and there we go it kind of reminds me of updating windows 95 or is it 98 well I'm old all right seven okay any more coffee and you need me I do all right let me go to questions before I do the last button yeah unless someone wants to challenge me on another button I can do that too and that'll be my eighth one and we'll just call this eighth button effects and web flow um let me look at chat real quick um look at my lists of questions let's see questions questions Colleen you're asking have you thought about doing a video on your setup um yeah okay I'll do it edited video explain why all my cables behind my desk is badly organized uh okay Oh see here turn it share web flow article on filtering collections you have anything - don't you mean oh thank you for answering David's question Wakanda about the current state of a menu item Tom but if you made a radius on button for would it not solve somewhat what you've tried to achieve on button three maybe I could try Mitchell is saying the ID on the next to the orange chair behind you ID ID ID those are books my wife is reading dare to lead by Brandon Brown not ID uh oh my god game changer yeah answer that button challenge Nasir saying divided divided into half sided what mmm hello and chul welcome of button divided into half sided not sure what you mean Oh probably where's the chair from I don't know my wife bought it I just thought it would be a nice accent to the office yeah James I've seen a few hamburger menus that you click in circles inside of it takes the whole page um oh yeah yeah I like that one ok that'll be the challenge all right here we go I know how to do that James thank you for that so button number 8 is just gonna take over the whole page so but number 8 is actually is not a button tutorial but more of a full page button tutorial so let's see if I can do it in less than 30 minutes Star Wars theme button this is my wife's art r2 unit and it's named [Music] little Star Wars break for me what do you mean my Star Wars theme button I don't know what he's talking about well if you know how to do it then why don't you just do it yourself I don't mean to hurt your feelings I mean come on if you if you can share with us how to do it it'd be nice okay like share your knowledge that's what this whole stream is about you don't have a web flow account all right fine fine we'll get we'll figure it out later all right oh oh I'll teach it to you anyways let's just do a full screen menu here we go go my screen where's my mouse there it is so when I click on this button it expands into the whole thing so um actually let me start a new page let's just start a new page full screen menu all right okay let's go ahead and let's do flat icon let's go ahead and get hamburger so we're gonna get a hamburger menu right here hit the SVG you so we got the SVG and we're going to let me open up sublime real quick there we go right there okay cool so we have the Soo that's a lot of SVG that's not too much a copy all of that and we're going to drag in a link block and we're gonna call this menu button in and we're gonna make the menu button let's make it 150 by 150 a huge huge menu we're gonna make it a circle and we're gonna fix it to the top right of our page right there at the z-index is something crazy like a thousand let's push this away from the top and push it away from the right something like that and we'll go ahead and center any child elements within it using flex so this is what we got almost done with our HTML and CSS let's put an embed so we can put our SVG of our hamburger we'll call it hamburger and we'll copy that id let me give it a CSS and we'll say hamburger fill color ernõ fill is current capital c for color and we'll set the width 100% and the height to a hundred percent and remove any widths and Heights that is in the HTML a bit SVG there we go save and close awesome so for this HTML embed will call this menu icon and let's take more control over this I want the width and height to be let's say 25 pixels now it needs to be bigger 75 area and since this is a link we need to go back to menu button and that's where we set the color of the font we'll set this to be white make sure there's no underlines in any of the text and yeah so how do we do this I don't know I kind of dunno maybe I don't know so here's the trick you need to add another circle so I'm gonna do at a div and it's gonna go under that menu button but it's also gonna be fixed and so menu circle thingy and this is what's going to take up the whole page and so let's go ahead and let's go ahead and give this a color of like black and we'll set this to position fixed top right and we'll also set the border radius of 50% so we can have that circle so right now it's happening behind this alright let here let me show you but does the index taller and we'll start out with 150 I know what I'm doing making me second-guess myself that guy anyways moving on I need to find the exact let's make this a bit smaller all right and let's move this away I'll use pixels for now move this away like something like that and go 50 there we go how come I can't see menu circle thingy where'd you go oh there you are you're hiding what did I give you we go a hundred there we go this menu circle thingy will be 200 just so I can see what I'm doing for now all right something like that okay and so what's gonna do it's going to explode actually it's two viewport width so it's more unresponsive we'll go five and five there we go and so when I click on this this explodes and takes over the whole screen alright so let's try it and go like this I'm leaving this on top of the menu button just for demonstration purposes when I click on this aren't animation button eat menu circle thingy is my target so I'm going to scale it to something ridiculous like 200 V W okay okay 100 V W it's glitched oh no I don't want to do scale sorry bleep I'm gonna do sighs hundred V W 200 V W and also I need to move it be like yeah I'm like this using exact pixels is not good but just for dimming demonstration purposes I would strongly suggest using percentages but yeah well this takes it over and let's do ease out cubic and there we go did I do it right probably not why did it start there is it because I used move all because I used move my bad let me see if I can oh I know I'd done it for a client it's like one of those things all right oh so close second guess myself its fault blame him it has to be something with the move so let me try adding a move as a initial state Thank You Mitchell I was thinking the same thing let's say the move initial state will say 0 v w 0 V W right and then at the same time the size we're gonna move to negative 100 vw+ oh yeah positive V W we'll try this maybe I'll work will this work nope it's still coming from the center why because life I'm wondering if it's the orange in origin thing again wonder if it's that if it is then I'll explain it's not fail don't listen to me don't even watch my unsubscribe now how did I do it and I'm not allowed to show the project that I did this on coz the client didn't launch his site yet but I did it a long time ago so since we have 18 minutes left let me look up that project while you talk amongst yourselves or ask other questions find it no I've done it make sure move animation has an initial state of 0 0 whatever that ok always keep a copy of the projects before you transfer it over to your clients looks so good I wish I can show you all I was so happy when I did this I was like oh my god I figured it out menu circle xc60 order radius yeah I'm yeah I'm doing that I'm doing that right so when I click on menu link open menu what am i doing menu circle starts from a size of 5 vh and then it ends at a can I actually let me just remove his logo and name yeah let me just do display:none on his logo name and so what I'll do after I'm done streaming is I'll share it with you all so you can reverse engineer um but I feel like I'm doing the exact same thing that I did for this client ego and nav element uh where's okay here's logo I'm going to remove it oh god okay I'll do opacity zero then I want to show you all I want to I so want to UM be here do that let's take this and display:none almost done talk amongst yourselves how's the weather if I preview yeah whoo cool okay I can show this let's check this out I was able to do it okay so this is what you're talking about it's possible but how did I do it obviously I had more than 30 minutes to work on this work on this button so I'll figure it out thanks for the challenge I need to refresh my memory on how to do it but yeah we'll call this seven buttons i'll retitle this YouTube video as seven button effects and web flow and a failed fullscreen menu I don't know if that seems too long but whatever right yeah all right let me check your questions if there's anything else okay so Mitchell saying or zero in every field that you move X Y etc and uh let me try uh-oh go try again did you use size instead of scale I use the size in that project this project I use size wait let me just double check if I labeled anything in the animal in the interaction and you link open menu okay cool oh here lay it out white shirt white menu circle the size is 5 vh 5 vh the menu circle the menu circle has a move of that and then after Ike that's the initial state and then the ending state is this and did I mess it up no give it ending state is this it's the size is 400 VH by 400 VH and I also move it to 57 and negative 200 so I'm doing the same exact thing that you saw me do but what is life I don't know I have it fixed so that's the same thing yeah I don't have a transform origin yeah whatever I'll figure it out come on a new circle thing Oh maybe after I don't have an initial state for the size all right maybe this is what life needs this goes 75 75 and the ending VW all right so size is going to be 5 GW 5 what no I don't want you 5 VW Isis pixels okay see how it started from the center I mean it's pretty cool that it goes around like that but that's not what we want and I'm getting frustrated with you why do you do the things hold on why is it starting from there like why did okay maybe it's this maybe I'm doing it wrong maybe it's like this and then I set the size to be bigger we'll go 400 okay so oh it still does all right well that's a fail I'm gonna go any questions well we kind of did stuff I still had fun d did you have fun did did you learn a thing or two maybe this VG trick maybe interactions trick hopefully learnt something hopefully I enriched your morning evening or afternoon no but yeah any questions you des Lee has that for a button that dissolves into particles oh yeah yeah you can't do that in web flow but you can if you have like maybe if there's a lot of file that does a hey is saying can you talk about how to use REM for typography typographic scale inside a web flow no because I've never used it I've only used pixels and V W with font sizes oh I'm not not well-versed in fruit M's anything else no other questions thank you all oh so much I mean means a lot and if you want to continue to support me there's my buy me a coffee link and again thank you to the pixel geek community or helping me helping fund this streaming PC is now everything is super smooth all the transitions the stream gets 60 frames a second which is awesome any suggestions for next week any suggestions and yeah maybe Carlene and I can make a make a full week camp or something no think that'd be cool 20 hours to do you understand web flow I'll be a big event and it was fun teaching kids but um and it was it was tough and that's what I try to do all the time try to break down web design concepts in ways that make sense whether it be how like how UX relates to food the the restaurant industry I mean how do UX and web design relates to the high-class Michelin star restaurant experience how speed of your website you know how everything has to be super fast and why it needs you only get six seconds um I try to take complex concepts and make it simple you know whether it be for kids or for adults I mean to me there's no such thing as adults there's only being a child and then being a child who's also adulting and what a dull team means to me is you're paying taxes yeah and dealing with a lot more responsibility because when I was a kid I remember the only thing I had to worry about is when is the next Teenage Mutant Ninja Turtle episode coming out because it's a two-parter and I'm and I'm like what's gonna happen shredder has the turtles know he's gonna make turtle soup and then now I'm like oh no taxes tax season I have to remember April 15th and then all the other things that's happening in the world like here we go a pandemic and the whole black lives matter movement and closing up daycares and uh let me just go back to the Ninja Turtles but yeah wrestle I'm in for camp yeah cool ok can you in what flow can you talk a little about VW and what four types kill ya real quick good question super simple so if I take a thingy and go let's put a heading right here actually let's put a div and we'll Center that in there alright cool so we have this heading and it has a size of 38 pixels okay so no matter what size screen it's going to be 30 pixels but what if I want this type to grow and shrink with the width of the screen I can use VW oh this VW is viewport width so the percentage of how wide the width is is what's going to set this set this font size so if I go here there we go and that's why I like using VW instead all right so if I preview across all breakpoints there we go and maybe it'll work for you or if you look at the very bottom ruler and hold it down there it works on the Nintendo Entertainment System if you know how to get a browser into an NES a lot of bones cool all right so that's that any other question before we end it for today oh so here there's a nice video of you and Jason talking about responsive typography oh yes yes check that one out so that's it thank you all so so much play music the plane here we go cool all right thank you all so so much for being here taking your time and and spending it with me and the rest of the Pixley community you all are awesome if you learn something day and you continually apply it pass that favor forward pass pass that knowledge forward all right teach your children each your friend show them what they can do inside of webflow I'm not trying to advertise for all I'm doing is trying to push this this wonderful knowledge that I've that I've got from fellow friends from different youtubers from all these articles stackoverflow in the web flow forums web flow Facebook group or even the reddit group and I get this knowledge I gain it and I'm like dude that's awesome and now I'm like trying to show everyone did you see this try this try this and it's me it's life-changing right so have fun with the knowledge have fun with your projects and I'll see you next week Saturday at 10 a.m. Pacific time and that's it thank you all so much I'll see you next time and as always make that were beautiful together see ya [Music] [Music]

Channel: pixelgeek

Views: 3,737

Keywords: content management system, design, graphic design, jquery, responsive web design, tutorial, web design, web design tutorial, web development, webflow, webflow tutorial, pixel geek, pixelgeek, apple big sur, apple web design, apple macos big sur, apple mac os, apple macos

Id: efd8Mp3DE8M

Length: 119min 0sec (7140 seconds)

Published: Sat Jul 18 2020