Streaming live at 10am (PST)

Animating buttoms with SVG filters


How can I make this kind of button?

I still going to do a search about it, but maybe someone here know how to do it in webflow :wink:


Custom Code implementing SVG filter buttons

Simply follow the tympanus tutorial.
Create your button in webflow, give it a class of .button
Then insert the codepen code of the tutorial inside your site footer code and play with it


Let me see if I got it:

1) I insert this code in site settings/custom code/footer code:
<svg xmlns="" version="1.1" class="svg-filters">
<filter id="filter">
<feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />

2) After that, inside my buttom (in the designer) on the custom code area I copy this other one:

.button {
/* other styles */
-webkit-filter: url("#filter");
filter: url("/#filter");

And thats it?

closed #4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.