Streaming live at 10am (PST)

Animating buttoms with SVG filters

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!

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="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?

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