Icon Hover
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: #0a3d62;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
a{
margin: 0 20px;
width: 80px;
height: 80px;
background-color: #ccc;
display: inline-block;
border-radius: 24px;
box-shadow: 6px 6px 12px rgba(0,0,0,.15),
-6px -6px 12px rgba(255,255,255,.1);
overflow: hidden;
font-size: 28px;
transition: .3s linear;
position: relative;
}
a:hover{
transform: scale(1.3);
border-radius: 50%;
}
a i::before{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
background-size: 200% 200%;
background-position: 75% 75%;
top: 0;
left: 0;
line-height: 80px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: background .5s linear;
}
a:hover i::before{
background-position: 0% 0%;
}
.fa-facebook-f::before{
background-image: linear-gradient(135deg,#3b5998 30%,#0a3d62 50%);
}
.fa-twitter::before{
background-image: linear-gradient(135deg,#1da1f2 30%,#0a3d62 50%);
}
.fa-instagram::before{
background-image: linear-gradient(135deg,#c32aa3 30%,#0a3d62 50%);
}
.fa-youtube::before{
background-image: linear-gradient(135deg,#d71e18 30%,#0a3d62 50%);
}
.fa-linkedin-in::before{
background-image: linear-gradient(135deg,#007bb5 30%,#0a3d62 50%);
}
</style>
</head>
<body>
<div class="sm">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</body>
</html>