MAGNETIC BUTTON HOVER - Webflow Tutorial

[Music] hey guys it's kaler in today's video we're going to create an awesome button hover effect that's magnetic it sticks to the mouse and follows it around and then when you release it bounces back to its original position it's also got a splash of color on that hover animation it's only going to take us a few minutes to set this up in webflow so before we dive in make sure you hit that subscribe button for new videos like this every single week and with that said let's get started and of course i need to give credit to dennis snelberg for creating this interaction we're going to be recreating his button hover in today's webflow tutorial so make sure you check out his portfolio site it's linked down in the description below all right so to get started here in webflow i'm just going to scroll down where i have this same grid set up but i don't have a button here so i'm just going to be placing that in the bottom right corner of this layout so just hit command e and then just type out div block and i'm going to give it a class of new button since i already have a button if you're in a new project you can just call it button if you'd like so the first thing i'll do on this is i'm going to go up to display and set that to flex vertical and align that center and justify that center that way when we create our button text it'll be centered inside of our button you can set your button to any height and width you want i'm setting mine to 200 pixels by 200 and i'm also going to set the position to relative since we'll have something absolute inside this later and then give it a nice fill color i'm going with a black finally setting the radius to 100 will make it a nice rounded circle next i'm going to hit command e and create a text block then when we have that selected i'm going to go up to the fill color on this and we'll just set this to a nice white color and then the text is a little small by default so i'm going to bump that up to 18 pixels just so we can read it center line it and then i'll call this something like get started and this is a button so i'm going to select the new button class right click and then go to convert to link block so our mouse cursor will change when we hover on that since we did that i'm going to go down to the decoration and remove that same thing on the hover just to make sure that when we hover over this button our text doesn't get that nasty underline we don't want that so then i'm going to select this class now and create a new div so it's inside of our button and i'm going to call this hover color and so this is going to be the splash of color when we hover over our button i'm gonna go to position and set this to absolute select full so that sets that to zero percent all around and on the top value we are going to change that later but for now i set it to this so we can see it to style it on the z index we'll give it a z index of one and then let's give this a nice blue colored fill and then to make this a circle we'll set that radius to 100 as well and then now you'll see our text is hidden underneath this so i'm going to go ahead and grab that text in the layers panel and then we'll go ahead and on the position we'll set that to relative so we can grab that z index and set it to five so it appears in front of that color then if we select hover color once more now we can set the top value to auto since we've already styled it and by setting that top value to auto you'll see that that places that at the bottom of the button and so that will allow me to set the height to zero percent and so now when we hover on we're going to change the height value to 100 and it will grow from the bottom to the top and then we hover off it'll go back down to zero percent and so with that that's all the setup we need for this button so now we can start adding our interactions to make this look really cool and then we can select our new button class go up to the top right for the interaction panel and i'm going to add a element trigger of mouse hover and then we're going to create a new animation for the hover on which i'll call button hover on so i'm gonna go into the layers panel i'm gonna grab the hover color class and then under actions i'm gonna hit the plus icon and i'll set that to a size action so we're going to set the initial state so where we want the animation to start from so i'll check the set initial state box and then by default i want this to be at 0 and then we can just right click and duplicate that and then i'm going to set this to 100 so where we want the animation to end and then i want this to be a little faster so i'm going to change the duration to 0.3 seconds and then to make this nice and smooth we'll add some easing so i'm going to go in and out court and then we can take a look at that by hitting the play and you can just see it scales from the bottom to the top so we can save that and now we need to set a on hover out animation so i'm just going to create a new one so we'll click plus and then i'm going to call this button hover out and then on this one we don't need to set an initial state so i'll just grab the hover color class add a size action and we'll copy those same settings down 0.3 for the duration in and out court for the easing and then we'll set it down to zero percent for the height value changing it back to its starting state so then you can save that and then we'll go ahead and look at the live preview so you can see what we have here we need to change the overflow on this button so i'll grab the new button class go to my style panel and then we'll go down to the overflow and set that to hidden that way we can't see the edges of that blue circle so now when we hover over it it looks nice and clean and we have this awesome splash of color when we hover on and off this button so now we have that we need to create that magnetic effect when we hover over it so we'll go to the interactions panel once more elemental trigger and i'm going to grab the mouse move over element so while our mouse is moving over it we're going to create a new animation and i'll just give this one a random name and so this has a mouse x actions and a mouse y actions so we're gonna add a mouse x first and with new button selected we're gonna add a move so we have a zero percent and a hundred percent state so under mouse x at zero percent i'm going to set this to a value of negative 70 pixels and then when it's at 100 i'm going to set that to a value of 70 pixels so that's going to make that snap to my mouse so if i turn the live preview on you can see it kind of pulls towards my mouse when i hover over on that side so that's what we're looking for so i'll turn that off and now on the y we're gonna add another move so we have the same thing zero percent and one hundred percent so at mouse y zero percent we'll set that to negative seventy and then at one hundred percent we'll set that to seventy and so now it's going to pull towards my mouse no matter what direction i'm hovering on this button with which is exactly what we're looking for now we need to add that text pool so that the text pulls with the button as well so i'll go to the layers panel i'm just going to grab that text block and then we'll hit plus under x and set it to a move and then this time we need to right click and duplicate and then drag one down manually since it doesn't create the starting and ending states for us so at zero percent on the text block on the x-axis we'll set that to something like negative 25 so a much smaller number and then on the 100 i'll set it to a positive 25 pixels and then we need to apply this to our y as well so again right click and duplicate drag that down to 100 percent so at zero percent on the y we need to set the y value to a negative 25 pixels and then at 100 we'll set it to a positive 25 pixels so with live preview on you can see our text now moves a little bit more and it's creating a nice little effect so with that little stuttering all you have to do is update the smoothing slider in webflow it's kind of a little bug so if you're getting that stuttering effect just go to the smoothing and change that a little bit so now you can see this nice pull effect and it looks nice and smooth so now i want to create that bounce effect so if i scroll up real quick you can see when i release that kind of bounces back in place to do that it's real simple we just need to go back into our mouse hover so our first interaction we set up and then in the button hover out that we created we need to select our new button class and i'm just going to drag this to zero percent so we want it to happen immediately and i'll set the move to x and y since when we hover off we want it to snap back to its original position then under easing i want to go to ease out and set that to out bounce which is the key to that and you can set the duration to whatever you want i'm going to leave it at default then we just need to grab that text block and do the same thing so we'll add a move we need to move it up to zero percent so it happens immediately with no delay we'll add that bouncing on the out and then i'm gonna set the x and y values to zero so it snaps back to its original position and then we can hit save so that's all you need to do to add that nice bounce effect and then i'm going to go ahead and uncheck the tablet phone landscape and phone portrait on both of our interactions just so we don't have those and then i'll update the smoothing just to make sure that we're not having that jittering bug and with that we have created our awesome magnetic button which you can add to any of your webflow projects if you enjoyed today's tutorial make sure you give it a like check out dennis his link is down in the description don't forget to subscribe i upload every single week also check out these design related videos for more content from me and as always have a great day and i'll see you guys in the next one you

Channel: Caler Edwards

Views: 28,932

Keywords: MAGNETIC BUTTON HOVER - Webflow Tutorial, Webflow NoCode Tutorial, Easy Webflow Button Hover effect, Webflow interaction tutorial, Magnetic Button Webflow, Follow the mouse Webflow, Button Hover Interaction in Webflow, Webflow Tutorial, Webflow, NoCode, Caler, CalerEdwards, Caler Edwards, Advanced Webflow Interaction, Amazing Webflow Website, Stunning Webflow Interaction, Web Design Tutorial in Webflow, Webflow Button, Button Hover Animation Webflow, Sticky Button, Magnetic Button

Id: lQMadNmdxYA

Length: 9min 56sec (596 seconds)

Published: Mon May 30 2022