<head><script src="https://kit.fontawesome.com/369c45c001.js" crossorigin="anonymous"></script></head>

<body>
	<ul>
		<li><i class="fas fa-ghost"></i></li>
		<li><i class="fas fa-broom"></i></li>
		<li><i class="fas fa-cat"></i></li>
		<li><i class="fas fa-book-dead"></i></li>
	</ul>
</body>
body{
	height:100vh;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0;
	font-family:sans-serif;
	background-color:#D96C05
}

ul{
	padding:0;
	margin:0;
	display:flex;
}

ul li{
	list-style-type:none;
	width:120px;
	height:120px;
	margin:0 20px;
	border:2px solid black;
	border-radius:50%;
	transition:all 0.5s;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}

ul li i{
	font-size:48px;
	color:black;
	transition:all 0.5s;
}

ul li:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:black;
	border-radius:50%;
	z-index:-1;
	transition:all 0.5s;
	opacity:0;
}

ul li:hover:before{
	opacity:1;
	transform:scale(0.8);
}

ul li i:hover{
	color:white;
}

ul li:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:transparent;
	border-radius:50%;
	z-index:-1;
	transition:all 0.5s;
	opacity:0;
	border:2px dashed black;
	box-sizing:border-box;
}

li:hover:after{
	opacity:1;
	animation:rotating 10s linear infinite;
}

@keyframes rotating{
	0%{transform:scale(0.92) rotate(0deg);}
	100%{transform:scale(0.92) rotate(360deg);}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.