Streaming live at 10am (PST)

Custom Code implementing SVG filter buttons


#1

Hi everyone,

I am not a coder, but I want to try to implement button #3 from this:

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

Source:

I'm not sure where or how to put in the code/extracting the code from the source files.

Here is my design, I'd like to do this with the 4 buttons. http://vhunt.webflow.io/

Can anyone provide any tips or a starting point?

Thanks!


#2

Hi @kootommy,

Phew. It's quite hard fiddling that code. Anyway I was able to place it on webflow.

Demo here:
http://distortion.webflow.io/

I did some shortcuts on it btw, like I hosted the css and javascript files externally.
main.css
main.js
TweenMax.min.js

However for the CSS you can customize it anyway you like in webflow. The most important part is to EMBED this code in your webflow (position it anywhere you want)

HTH


#3

Thank you so much @ceefor !

If I have moved webflow's code onto a domain via FTP, is it possible to host the css/javascript files on there?

I'm not really familiar with this, so I'm not sure what you mean by hosting them externally.

Amazing stuff though! Thanks again!


#4

Yup, it will be easier if you'll export the code and place on a different host. That way you can place all the css and javascript in one place. :wink:

I was trying to place the code needed via https://help.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site but it's limited to 2,000 characters so I had the files hosted to my local server and just linked it via custom code:

<script src="http://yoursite.com/webflow/TweenMax.min.js"></script>
<script src="http://yoursite.com/webflow/main.js"></script>

Great website btw. :wink:


#5

Hey @ceefor, great tips!

But I still don't get it :wink:.
I opened this other ticket a while back too. Because I am thinking in start using the webflow host.

I have to copy all .js (main and tweenmax) and the main.css to the custom code, and then

Then, we define the filter inside an SVG object which we will place in our HTML:








Now we apply the filter we just created to the button in the following way:
.button {
/* other styles */
-webkit-filter: url("#filter");
filter: url("/#filter");
}

I am really a newbie with code, hope you could help me!

Thanks!


#6