Umbrella Button

Hover state for a CTA. For this button, as for any UI animation I do, I like to start doing it in after effects, so that I can play around with the timing and the acceleration and get all specs needed for the code.
The CTA CSS is based on 6 squares inside a container, these were modify so they look like triangles by adjusting the color and thickness of their borders. The squares scale up one by one, starting from a dark color to become white, and finally the whole container is rotated 360 degrees.
As for the animation on CSS, I decided to use the transition property instead of keyframes (%) since the only keyframes I had on after effects were at the beginning and the end of the animation, nothing in-between.
Hope you like it : )