Ekstra eklenti gerektirmeden, sadece birkaç satır CSS ile şık bir hover geçişi oluşturuyoruz.
Tasarımınızı öne çıkaracak sade ama etkileyici bir efekt arıyorsanız bu videoya göz atabilirsiniz 👇
https://www.youtube.com/watch?v=SKqGR1cb1Ic
selector:before {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
border: 2px solid #fff;
transition: 0.5s;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animate 10s linear infinite;
}
selector:after {
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
transition: 0.5s;
border: 2px solid #fff;
border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
animation: animate2 6s linear infinite;
}
selector {
position: relative;
z-index: 10;
}
selector:hover p {
color: #fff;
}
selector:hover:before,
selector:hover:after {
background: rgba(0, 0, 255, 0.6);
border: none;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
} 
