We’ve all been there. You have a blog, a website, and all you need is social icons for people to follow you. You drag them but for some reason, your fancy little icon does not have the hover effect.
This is where this tutorial will come in handy (just for you!). I’ll show you an easy way to add a hover effect on top of those nifty social media icons!
In this tutorial, you will learn how to add a hover effect to social media icons that are placed in your website header.
Let’s get started.
To create Social Media Icons Hover Effect we have used Font Awesome. If you don’t know about Font Awesome then Font Awesome is a widely-used icon set that gives you scalable vector images that can be customized with CSS.
You have to add this to your HTML page in the head tag.
How to get Font Awesome Kit’s Code
It’s very simple. You have to log in to Font Awesome site and they will provide you Kit’s Code. Just see the image it looks like that.
HTML Code
<!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">
<title>Social Media Icons Hover Effect</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/cad5595faf.js" crossorigin="anonymous"></script>
</head>
<body>
<a href="#" class="card">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="card">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="card">
<i class="fab fa-whatsapp"></i>
</a>
<a href="#" class="card">
<i class="fab fa-twitter"></i>
</a>
</body>
</html>
CSS
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #171717;
}
.card{
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.144);
border-radius: 10px;
box-shadow: 0 20px rgba(0,0,0,0.205), inset 0 20px 20px rgba(253,253,253,0.205);
margin: 15px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
font-size: 2em;
color: rgba(255, 255, 255, 0.336);
position: relative;
transition: box-shadow .4s, color .8s, transform .4s;
}
.card:hover{
color: #ffffff;
box-shadow: 0 20px 20px rgba(0,0,0,0.205),
inset 0 20px 10px rgba(255, 255, 255, 0.287),
inset 10px 0 20px rgb(255,58,58),
inset -20px 0 20px rgb(104,255,58),
inset -30px 0 20px rgb(71, 58, 255);
transform: translateY(-10px);
}
Top comments (0)