CSS to achieve particle dynamic button effect

Original link

https://github.com/XboxYan/no…

A button is probably one of the most common components on a web page. Most of them are unremarkable. If you come across such a button, would you be tempted to click it a few more times?

Usually the first reaction to this kind of effect may be to use canvas , such as the following case

The effect is even more shocking. Of course, canvas implementation also has a certain threshold, and it is a little troublesome to use in practice (a common problem of all js implementations). Here we try CSS implementation method.

Generate Particles

Apart from the js solution, there are also HTML and CSS implementations. Needless to say, HTML is just a lot of tags.

<button>
    button
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</button>

Generally speaking, I don’t like this approach very much. It has too many tags, the structure is not beautiful, and it may cause other impacts on existing pages (in many cases it is not convenient to modify the original HTML structure).

Then let’s take a look at the CSS implementation method. There are two main methods. In fact, it is just to think about which attributes can be infinitely superimposed. One is box-shadow , and the other is background-image (CSS3 supports infinite superposition).

1.box-shadow

Let's first look at box-shadow method. In order to avoid using extra tags, pseudo-elements are used here.

.button::before{
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff0081;
  box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*Infinite overlay*/
}

There is some effect, it just takes more time to debug. The position and size of the particles are mainly determined by the offset and expansion.

However, the offset here can only be in px units, which cannot adapt to the size of the button well, so the second method is used here to achieve

2. Background-image

In CSS3, background-image can be infinitely superimposed, similar to

.myclass {
  background: background1, background2, /*...*/ backgroundN;
}

Here we can use radial-gradient to achieve multiple small dots.

.button::before{
  position: absolute;
  content: '';
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 0), 
  radial-gradient(circle, #ff0081 20%, transparent 0),
  radial-gradient(circle, #ff0081 20%, transparent 0), 
  radial-gradient(circle, #ff0081 20%, transparent 0), 
  ...;
  background-size: 10% 10%, 20% 20%, 15% 15%,...;
  background-position: 18% 40%, 20% 31%, 30% 30%,...;
}

Here, background-size and background-position are mainly used to control the size and position of the origin. It seems complicated, but in fact, as long as background-size and background-position correspond to background-image position one by one, it will be fine. It may be a bit difficult to debug in actual development. You can fine-tune the real-time preview effect directly in the console by using the up, down, left, and right keys on the keyboard (you can consider making a visualization tool).

This creates a simple particle effect.

Get moving

Although background-image does not support CSS animation, the other two background-size and background-position do support it, so CSS transition and CSS animation can be used.

The animation effect is very simple, which is the process of particles spreading outward from the center and gradually disappearing.

transition

Let’s first look at the :hover interaction

.button::before{
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}
.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
}

Of course, it is definitely not ideal to set it directly like this. When the mouse leaves, it will shrink back. The effect is as follows

We need the mouse not to shrink back when it leaves. How can we achieve this?

It's very simple. Just set transition under :hover , which means that the transition will only occur when the mouse passes over it, and not when it leaves it.

.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

Does this feel a little better? Click here to view.

What should we do if we want to make particle animation appear when clicking? Here we need to use the :active pseudo-class.

If we follow the :hover logic, then

.button:active::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

Unfortunately, it can only be triggered when the button is pressed. Once the mouse is lifted, it disappears. At this time, we need to change the angle. You can imagine it this way, the default is divergent, then when you click it, it converges, and when you lift it, it will be restored to the previous divergent state. At the same time, you need to cancel the transition effect when you click, as follows

.button::before {
    /*...*/
    background-position: 5% 44%...;/*Diffusion state*/
    background-size: 0% 0%;
    transition: background-position .5s ease-in-out, background-size .75s ease-in-out;
}

.button:active::before {
  transition:0s;/**Note to cancel the transition**/
  background-size: 10% 10%, 20% 20%...;
  background-position: 18% 40%, 20% 31%,...;
}

You can check out this demo

Why do we need transition:0s in :active ? You can try it without adding it and you will understand the effect, as follows

animation

The implementation principles of animation and transition are similar. The advantage is that more sophisticated animations can be made. Let’s take :active method as an example.

.button::before{
  /*...*/
  animation: bubbles ease-in-out .75s forwards;
}
.button:active::before {
  animation: none; /*Note that the animation can be canceled here*/
  background-size: 0;
}
@keyframes bubbles {
  0% {
    background-position: 18% 40%, ...;
  }
  50% {
    background-position: 10% 44%, ...;
  }
  100% {
    background-position: 5% 44%, ...;
    background-size: 0% 0%;
  }
}

You can view the source code here.

The only drawback may be that the initialization animation will be executed once.

summary

The above introduces a pure CSS implementation of a particle animation button. The advantages are obvious. You can copy CSS and throw it directly into the project to use it, whether it is a native project or a react project. There is no need to bind any events or additional logic processing, which enhances the existing experience. Just imagine, if this is a 'buy' button, will it trigger you to buy more times? Anyway, I will definitely be attracted to it, haha~

There are still some shortcomings. For example, the positioning above is densely packed with workload. It is recommended that these functions be fine-tuned after the overall project is completed. You can also try to make some visualization tools to reduce the workload. That’s it.

Summarize

The above is the CSS particle dynamic button effect introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!