With shadows being the primary method to add depth to elements on a light background, lights add depth and separation to elements on dark mode.
This effect is inspired by a post by @fffabs on Twitter. Not a single line of code was written during the making of this interaction.
Hover and move the mouse pointer around the 👆 button to see the effect.
Move your mouse around in circles tracing the outlines for even more fun!
PS: This is based on mouse interactions and is best suited for desktops and tablets with trackpads/mouse.
🤔 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.
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.
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.
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.
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.
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.
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).
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.