Webflow Tutorial by Zohaib A.

The following light button

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.

Challenge accepted... with a twist

Twitter comments on the original design about the difficulties of building this interaction.

ūü§Ē 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.

Same button, but longer

The tutorial

Step 1: Planning

Screenshot of Figma layers

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.

Describing the HTML Layers in Webflow

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.

Setting margins to make room for borderSetting position absolute for border element

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.

Describing border HTML elements on top of Webflow screenshot

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.

With masking
Without masking

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.

Screenshot of mouse actions from WebflowScreenshot of mouse action properties on Webflow

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.

Interactions + masking
Without masking

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.

Describing glow layers on Webflow

The layer order to add the 2 new glow layers.

Screenshot of size adjustment values on WebflowScreenshot of absolute positioning on Webflow

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.

Screenshot of mouse interactions now with glow effects on WebflowScreenshot of glow effects mouse interactions properties on Webflow

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.

Screenshot of hover effects on WebflowScreenshot of hover effects on Webflow

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.

Follow me on Twitter
Webflow Tutorial by Zohaib A.
Zohaib's picture

Zohaib A. is a Freelance Product Designer & Manager who found his love with Webflow as a means to use interaction design to make websites both pretty and usable.

Based on design by Fabio
Fabio's Picture

Fabio is a designer and studio owner based in United Kingdom.

Link to Twitterzohaib@hey.com