Animate shadow of a button?

Design help Design inspiration
1

Hello there,

Been using webflow for a few days and i am amazed by the things i can do with minutes instead of writing the code for hours.

But this is the first time i encounter something that i could not find or maybe it does not have (yet).

Is there anyway i can manipulate CSS properties in the Interactions menu?

I would like to animate the shadow of a button, like on and off, kinda like a transition, but i can only manipulate the shape and opacity at the Interactions Menu.

Is it possible or this feature is not available?

Thank You!
Vinny

2

Hello! Webflow is amazing isn’t it? :webflow_heart:

Do you mean, when you hover over a button you’d like the shadow to appear, and when you move your mouse away it disappears?

3

It is reaaaaaallllllyyyy amazing!! :heart_eyes::heart_eyes:

I mean make it animate on loop, not hovering it, i am developing an interface for my company and i would like to make this buttons “stand out”, having them “glowing” with an animated shadow around it, so the user can see it clearly what to press.

Sorry if i did not make it clear :sweat_smile:

Cheers!

4

Hi @vl3d,

You could do this within the custom code editor using a keyframe animation.

@keyframes glow {
0% { box-shadow: 0 0 -10px red; }
40% { box-shadow: 0 0 20px red; }
60% { box-shadow: 0 0 20px red; }
100% { box-shadow: 0 0 -10px red; }
}

.glowing-button {
animation: glow 5000ms infinite;
}

Hope this helps @vl3d