Button Style

[planet]

Hello.

This is my website: globalmarshallplan.org

If you move the cursor to the button under the first headline, you will notice a particle effect.

At the moment the effect is a line that appears and expands from left to right.

But I want exactly the opposite to happen: the line should already be there and be pressed from left to right and disappear when you move the cursor to the button.

As soon as the cursor is moved outside of the button range, the line should be renewed - again from left to right.

How can I achieve that?

Thank you in advance.

[friech]

Hi Sagar,

Thank you for writing in, regretfully the interaction is triggered by hover so what you’re trying to do is not possible without customization.

What I can advise is to apply a top border on the button instead, and make that border transparent on hover (Interaction), you can still apply a particle on the button to have the transition effect.

Elements - Using Partials

Cheers!

[planet]

Thank you. Your advice has improved the button’s looks a lot.

Is there a way to make the particle effect overwrite the border? It seems that the borders are not affected by the particles.

[christian]

Hey Sagar,

Regretfully, the particle could not overwrite the border as it’s located inside the button while the border is applied to the button itself.

The good new is, you can use the Box Shadow setup instead. Please watch the video below. Pause and play or play in slow motion to follow along with the setup.

Hope that helps.

[planet]

Hello Christian,

thank you, that helped a lot!

My last question: is there a way to slow down the particle effect animation?

[ruenel]

Hey Sagar,

To slowdown the particle effect, you can make use of this custom css:

span.x-particle.x-anchor-particle-primary,
span.x-particle.x-anchor-particle-primary span {
    transition-delay: 0.75s;
    transition-duration: 0.75s;
}

Feel free to adjust the value of the delay and duration.

[planet]

Hello Rue,

thank you for your reply. Unfortunatly, the code doesn’t affect the starting animation but only the back transitioning.

[christian]

Hey Sagar,

Try adding this.

.x-anchor .x-anchor-particle-primary {
    transition: all 0.75s !important;
}

If that doesn’t help, regretfully, we can’t continue on hacking the particle effect. What we could do is list this as feature request so maybe a user interface might be added to control the speed of the animation in the future.

Thanks.

[planet]

Hey Christian,

thank you. This solved it!

[ruenel]

You’re welcome!
We’re glad we were able to help you out.