Streaming live at 10am (PST)

Animating buttoms with SVG filters


#1

How can I make this kind of button?

http://tympanus.net/Development/DistortedButtonEffects/

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

cheers!


Custom Code implementing SVG filter buttons
#2

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


#3

Let me see if I got it:

1) I insert this code in site settings/custom code/footer code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
<defs>
<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" />
</filter>
</defs>
</svg>

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?


#4

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