Particle Button Effect

by | Nov 21, 2018 | Plugin | 0 comments

Have you check these cool effect created by Luis Manuel CHECK OUT COOL EFFECTS Now you can use these cool effects in your WordPress website. There are 2 ways to do that. The easy way and the hard way. The hard way is explained here click here. I will not go into details of the hard way for now. But I have converted this into a plugin which makes it way more easier to handle.

CLICK HERE

[download id=”48402″ ]

Easy Way

Well the plugin itself is very explanatory but let’s get its little intro. When you install and activate the plugin you will get something like this,

As you can see everything have its own little description. But at a very basic level, you have to take care of 4 things.

  1. HTML tag that you are going to use like <a> tag
  2. class or id for that HTML tag
  3. Inform system what class or id it has to target for button effect in the first field
  4. The color of the particle in the Animation Color field

These are the 4 things that you need to tell system rest you can leave as it is if you do not want to customize it. You have to write your own CSS for button layout as this function do not work with Divi default buttons so you have to code your own button with CSS. And if you want to play with functionality or effects then buttons setting pane is open for you. Go and play with it.

[download id=”48402″ ]

Hard Way

Okay if you are a developer or want to code it by yourself instead of using the plugin then here is an explanation. I assume you are going to use it in Divi theme. So what you need to do is following;

 

  1. Insert HTML tag in your web as we did by using the plugin
  2. Give that HTML tag some cool CSS
  3. now goto this link click here and download project file and extract particle.css, particle.js and anime.js file and include them in Divi > Theme options > Integration > Head section
  4. Once you include these file then include following script code
<script>
    var particles = new Particles('.button');
</script>
where .button is target element for this function.

This will give you initial point, rest your creativity. 🙂

All credit goes to Luis Manuel who did this cool effects. I just convert them into WP plugin so you guys can use easily.

If any issue let me know in the comment section below.

Submit a Comment