CSS — Light / Dark Mode Toggle with HTML, CSS & JavaScript … Animation Form Hover Effects Button Text Effects Icon Animation Gradients Border Effects
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div>
<a href="#" class="link" ><i class="fa fa-instagram instagram"></i></a>
<a href="#" class="link"><i class="fa fa-whatsapp whatsapp"></i></a>
<a href="#" class="link"><i class="fa fa-twitter twitter"></i></a>
<a href="#" class="link"><i class="fa fa-snapchat snapchat"></i></a>
<a href="#" class="link"><i class="fa fa-linkedin linkedin"></i></a>
</div>
</body>
</html>
body{
display: flex;
justify-content: center;
padding-top: 20rem;
background: #000;
}
div{
display: flex;
}
.link {
text-decoration: none;
color: #b7b7b7;
margin: 10px;
width: 50px;
height:50px;
display:flex;
justify-content: center;
align-items: center;
background: rgb(28,28,28);
border-radius: 10px;
position: relative;
transition: 0.4s;
}
.link:hover{
transform: rotate(45deg);
}
.link::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
background: #373737;
border-radius: 10px;
transition: opasity 0.2s;
}
.link:hover::before {
opacity: 0.4;
}
.link:nth-child(1)::before{
background: #c32aa3;
}
.link:nth-child(2)::before{
background: #25d366;
}
.link:nth-child(3)::before{
background: #1da1f2;
}
.link:nth-child(4)::before{
background: #0a66c2;
}
.link:nth-child(5)::before{
background:#006ca6 ;
}
.link:hover::before{
transform: translate(-4px,-4px);
filter:blur(10px);
}
.link i {
font-size: 1.7em;
transition: all 0.4s;
}
.link:hover i{
color : #5400fb;
transform: rotate(-45deg);
}
.link:hover i.instagram{
color:#c32aa3;
}
.link:hover i.whatsapp{
color: #25d366
}
.link:hover i.twitter{
color: #1da11d;
}
.link:hover i.linkedin{
color: #0a66ca;
}
.link:hover i.snapchat{
color: #0a66c2;
}