Create the PERFECT Button (TailwindCSS / Framer Motion)

life can be unfair but what's more unfair are the concepts created and uploaded on X by verse I mean come on verse how are you able to constantly come up with these ideas design and then develop them from crafting satisfying buttons and mastering HTML and CSS tricks to creating 3D works of art verse epitomizes the skills of both a designer and an engineer but there was one thing that you did that had to be recreated and that is this button I mean look at how this light transitions across the edges of it whilst at the same time cast a shadow onto the button's text it's a button that any user would want to click and the people need to know how you did it so I tracked him down held him hostage until he told us how he did it it turns out was using reactjs Tailwind CSS and frame motion alongside some good old vanilla CSS now if you plan to follow along you can find the setup code within the description but otherwise let's kick it off to start with we have our button with some text that you can hardly see far from our final result so let's wrap the text in a span and provide it with classes text neutral 100 tracking wide and font light okay cool at least a button text is now visible let's then give the span tag a height and a width of 100% a display of block and position to be relative as for the button elements we can provide the class names padding on the x-axis of six padding on the Y of two a medium rounded border radius and a position of relative let's then add the class radial gradient to button and linear MK to span now these don't exist in Tailwind instead we'll be implementing them on our own inside of the index. CSS file we can start by defining a class called radial gradient for that we can give it a background and set that to a radial gradient where we have a circle set at 0% 0% this means that the center of the radial gradient is at the top left corner of the button then an rgba value with the values 250 250 250 and one for Alpha and 0% to indicate that this color will be at the very center of the gradient as for the second stop color we can set that to transparent and 100% so the edges of the gradient Fade Out next to the radial gradient we can define a solid dark gray color with Alpha set to one so in short this background is essentially a combination of the radial gradient and the solid color where the radial gradient is layered on top of our dark background however it's no good for it to be tucked away in the top left corner so instead we can Center it horizontally by setting Circle to be at 50% 0% then we can set the alpha value of it to be 0.05 so that has a more subtle effect and transparent to be 60% so that the gradient doesn't have such a large spread so that's the main background sorted out let's now shift our attention towards the actual magic of this button which is the shiny gradient and the shadow it casts with it underneath our last class we can Define another one called a linear mask we can add a mask image and set that to a linear gradient this will basically allow us to apply a mask to the elements where we can control what area of the Mask will be transparent and solid we can create a mask using gradient that transitions from opaque to transparent now this gradient doesn't function as a typical color object instead it serves as a blueprint that determines the opacity levels across an image in this setup pixels located in areas with higher opacity will appear less transparent compared to those in more transparent areas for the overall effect this will act as a shadow that Glides across the text to achieve that we can set it to be 0° as the first parameter for the bottom 20% to be white then between 20 and 30% to be transparent and then finally back to 100% to ensure that this style complies with all browsers we can copy it and Associate it with webkit mask image the problem however is that we have this dark line moving horizontally across the button we want it so that it's at a vertical angle so we can replace 0° with- 75° we now need this to move across the text luckily frame em motion will lend us a helping hand inside of the shiny button file we can import motion from frame or motion and then create and set the CSS variable --x to be 100% within the initial prop and then minus 100% within the animate prop usually this would mean that the value will start on the right side of the button but because we have the gradient angled at -75° we have to negate them it's an illusionary trick to make it look like it starts from the left hand side we can then add a transition props that repeat is set to infinity and the repeat type is Loop this is so that once the X variable has reached minus 100% it will be set back to 100% then back inside of the CSS file we can adjust the mask image and its web kit counterpart so the first White parameter will be our X variable offset by 20% using the calculate and variable CSS functions then transparent offset by 30% and finally white to be offset by 100% these offsets ensure that the gradient is still visible otherwise we would see a solid white text we can start to see the shadow like effect moving across the text however it's moving way too fast to adjust this we can configure the transition values for the repeat delay we can set that to 1 second that way the shadow doesn't start straight after it is finished then set the type of transition to be spring so that the animation feels more natural and physics based stiffness set to 20 which will make the transition more gradual and smooth and the spring effect much looser then damping set to 15 which controls how quickly the spring oscillations Decay with a value such as 15 it would create a moderate amount of damping allowing for some bounce and overshoot before settling finally a mass of two which would make the animation feel slightly heavier and more substantial as for the click interaction we can set scale in initial to be one and then add the while tap prop and set that to be scale 0.97 so that when the button is clicked it will scale slightly down in size inside of the transition we can add the scale object and set the type to be spring stiffness to be 10 damping to be five and mass set to 0.1 this this scale object within the transition will only affect how the scaling animation works on the button so now when we click on the button it scales down gently with our transitions out of the way we can go ahead and add a closed span tag underneath the one that holds the start now text we can provide it with the classes block absolute inset zero a rounded border of medium a padding of one pixel on each side and then finally a custom class which we will Define as linear overlay this span along with the class will act as a shiny border that moves across the button jumping back into the index. CSS file at the bottom we can Define the class linear overlay and then add in a background image of linear gradient with 0° rgba of 255 255 255 and Alpha 0.1 which will create a white color that is almost transparent then the same rgba with Alpha set to 0.5 and then finally another one with Alpha set to 0.1 you can see how there is a linear overlay on top of the button starting from the bottom the color begins to fade in and then back out as it reaches the top however again it is horizontal and we want it to be angled the same way as a shadow that moves across a text so we can adjust the degrees value to be - 75 then the gradient colors can also be distributed so that the first white color can be set to 20 20% the next to be 25% and then finally 100% similar to how we offset the tech Shadow to see the distribution more visibly you can see the green color as the one that will move across the button now we just need to animate them can start by using the calc and Val functions from CSS and offset the X variable by 20% for the second color we can do the same but offset by 25% and then finally offset by 100% that's the gradient effect sorted you can see how it Glides across a button timed with a shadow like effect that we have on the text we now need this gradient to run alongside the border of the button rather than the whole thing itself to do that we can add in a mask and set the first one to be linear gradient with black as both the first and second parameters alongside content box content box specifies that the mask should only be applied to the content area of the element excluding the padding that we give to the span then for the second mask we can do the exact same thing however this time without the content box to some this may look like gibberish but essentially we are doing the following so we have this gradient box and what we want is for the padded areas to be visible whilst everything else is transparent now if you remember we added a padding of one pixel to our Span in order to cut this out we can provide two masks the first one will cover everything apart from the padding which is signified by the use of content box then a second mask which will cover the whole thing when we apply the mask to the gradient box we want the overlapping areas to be transparent and ignore the areas that don't overlap in order to accomplish the last part we can add in mask composite and set that to exclude along with its webkit partner which will be xor exclude and xor basically mean the same thing which is the overlapping areas of mask layers will be excluded and there we go we have successfully created the same Button as V Us by leveraging frame em motion to power our CSS now it's up to you to go ahead and play around with some of the colors and see what variations you can come up with furthermore this video would not have been possible without verse so before you like subscribe and join the Discord server be sure to head over to X and give him that follow otherwise stay healthy stay safe and I hope to see you in the next video

Channel: rithmic

Views: 32,491

Keywords: Create a beautiful button, Framer Motion

Id: jcpLprT5F0I

Length: 9min 20sec (560 seconds)

Published: Thu Apr 18 2024