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);
	}
}