The benefits of recreating in Figma allows for better planning for layers in Webflow while understanding the limitations.
Step 2: Setting the styles and structure
When working for the web, some of the things to consider are how objects are stacked, how they need to be adaptable with dynamic text and how masking works differently.
Solving the stacking problem
The border block needs to be placed under the content block in order to independently control it, and use that as a "mask" for the second border color that interacts with mouse position.
To place them at the same position stacked on top of each other, the content class is used to set up the size with padding. The border block uses position absolute, and the 1px margin across the content block makes the border visible.
1px margin around the content block coupled with 100% height and width border block gives the illusion for an exact 1px width border
There are multiple ways of achieving this, including transform sizing, but the biggest benefit to approach, is to get a consistent border across all corners regardless of the size.
The other benefit is, masking.
Masking & The second color
Clipping masks are an option, but using the standard overflow hidden property allows for easier sizing for dynamic buttons.
Stacking the light underneath allows for overflow hidden on the border layer to act as mask, whereas z-index allows for stacking the lighter color on top of the border layer.
Often overlooked, using mouse interactions is one of the most fun ways to visually create interactions that are often hard to create, even for some seasoned front-end developers.
0% of X represents when the mouse is on the left, 100% when the mouse is on the right and 50% is the default state. We can move the element at 0 and 100% to a negative and positive value to follow the mouse position
These interactions are set up on the top container layer, as that registers the mouse position and we can control multiple objects using the same interactions panel.
Step 4: Replicating everything for the glow effect
Just like with borders, in order to create the glow effect, we have to create more layers. However, CSS does not allow to use the overflow property for masking the glow effect, therefore we have to make sure to limit how far the glow layers can go.
The layer order to add the 2 new glow layers.
Making the lighter glow half the size and using the original dreaded css method to place it to the center. Using non-uniform scale method via the transform property unfortunately does not respect the rounded corners.
Adding more interactions to the same button link container, we can play with various properties to create the effect we want
These interactions are set up on the top container layer, as it registers the mouse position and we can control multiple objects using the same interactions panel.
Step 5: Returning to the start position
Finally, we have to add the hover interactions for both mouse over and mouse out to return our elements to their starting position.
Hover interactions on the parent element
In this case, simple opacity was used to fade in and out the glowing border and glowing light (shadow).
Thank you for reading
It was fun to work on a post I found on Twitter. I hope you found this tutorial helpful. Please feel free to share it with others. I am available for freelance Web/App Design and Webflow Development projects.
I get easily distracted from working on my own portfolio website but you can follow me on Twitter to stay in touch where I tweet about product design and front-end development.