Animation icon button

Hi there,

This should help:
https://www.w3schools.com/css/css3_2dtransforms.asp
https://www.w3schools.com/css/css3_transitions.asp
https://css-tricks.com/almanac/properties/t/transform/
https://css-tricks.com/almanac/properties/t/transition/

You should be able to find lots of examples on Google as well as it's not theme-specific.

GB Pro has these built-in:
https://docs.generateblocks.com/article/effects-overview/
https://youtu.be/YLXclTycS9s
https://youtu.be/Pi8uVlbZ8pw

Hello, thank you for your answer. I used a css class for buttons to which I would like to add an effect which is the following :
-webkit-transition: -webkit-transform .4s ease;
transition: transform .4s ease;
-webkit-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);

My css class is "fleche". It does not work. However, when I use the css class found in the inspector: ".gb-icon svg" It works perfectly.
Except that suddenly the effect is applied to all the icons used on the site... 😅

Sorry, the problem is fixed by using "svg" behind the "fleche" class !
On the other hand I tried to add a class css to another button, which I also added in the additional css ".effetbox"
to obtain a box shadow effect except that it does not work ...
.effetbox: hover {
box-shadow: box-shadow: 10px -10px # ff0080;
}

Thanks 😀

Maybe because you've added box-shadow twice?
https://www.screencast.com/t/lN9AZ82o4

Unfortunately this isn't a theme-related issue so I'm not sure if I can be of more help.

You could also inspect the buttons on this page and see the CSS involved:
https://library.generateblocks.com/button/

Thanks you for your reply ! However, is the fact that I cannot add a custom css class to a button? For the box-shadow it is an error when writing the message, it is correct in my attribute

Are you referring to the buttons block?

If so you definitely can:
https://www.screencast.com/t/XW0IHUjB0

Hello,I'm talking about the block button! I added my css class to the place you showed me, it doesn't work ..
I added this class:

.effecthover: hover {
box-shadow: 0 5px 10px 0 #ffffff;
transition: all 0.5s ease;
}

Thanks

There shouldn't be a space between : and hover.

It's perfect, thanks ! 😅

No problem :)