How could I do that? What should I use? Because I dont even have idea how to start doing this, and what should I use.
And I want a simple spinning animation around FabButton.
I have done something similar here:
https://getevento.com - a spinning circle when hovering on a fab button.
Using the following CSS:
// see https://codepen.io/giana/embed/yYBpVY?height=636&theme-id=0&slug-hash=yYBpVY&default-tab=result&user=giana
$spin-border-color: #4f7b81;
button.fab {
&::before, &::after {
border-radius: 100%;
box-sizing: inherit;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
&::before {
border: 2px solid transparent;
}
&:hover::before {
border-bottom-color: $spin-border-color;
border-right-color: $spin-border-color;
border-top-color: $spin-border-color;
transition:
border-top-color 0.15s linear,
border-right-color 0.15s linear 0.10s,
border-bottom-color 0.15s linear 0.20s;
}
&::after {
border: 0 solid transparent;
}
&:hover::after {
border-top: 2px solid $spin-border-color;
border-left-width: 2px;
border-right-width: 2px;
transform: rotate(270deg);
transition:
transform 0.4s linear 0s,
border-left-width 0s linear 0.35s;
}
}