Rotating Circle Border Animation
In this tutorial, you will learn how to add rotating circle border animation to an element's hover with pure CSS. Watch the video below for a detailed tutorial.
HTML
<body>
<div class="border">1</div>
<button class="border">2</button>
<a href="#" class="border">3</a>
</body>CSS
body {
background-color: #2E3537;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
font-family: 'Arial', sans-serif;
}
button {
background-color: transparent;
border: 0;
}
a {
text-decoration: none;
}
.border {
width: 90px;
height: 90px;
line-height: 90px;
font-size: 45px;
text-align: center;
color: white;
position: relative;
box-shadow: 0 0 0 5px white;
border-radius: 50%;
}
.border:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
top: -4px;
left: -4px;
border: 4px dashed white;
z-index: 1;
}
.border:hover {
box-shadow: 0 0 0 0 transparent;
transition: box-shadow 0.2s;
}
.border:hover:after {
animation: spin 10s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}