The following light button

Challenge accepted... with a twist

🤔 moment after reading the comments

When the rebel in me saw comments that it would be hard to implement, I was like, "YEAH, let's do it!". While working on it, what would be better than making it without even writing any code?

Thanks to Webflow, I was able to do it pretty easily and I'm sharing these steps with the rest of the community for anyone to use, learn and improve upon.

The tutorial

Step 1: Planning

Recreating in Figma and balancing colors

Reference video from the original post

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.

Step 3: Webflow interactions

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).