Create Sliding Social Media Button HTML CSS
Preview
Hello guys, this tutorial is to create a "Sliding Effect" on social media buttons using font awesome. This tutorial is certainly very interesting for those of you who like animation effects. So if you apply it to your website, it will add to the good experience of the users and of course your website will be recommended by other users.
Okey, first create a project folder and enter it in the index.html and style.css files. When finished, open index.html and enter the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sliding Social Media</title>
<link rel="stylesheet" href="style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet">
</head>
<body>
<ul>
<li>
<a href="#">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
</a>
</li>
</ul>
</body>
</html>
You can add more buttons, because it's just an example, so I just added 4 buttons. Now, open style.css and enter the following code
body{
margin: 0;
padding: 0;
}
ul{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
}
ul li{
list-style: none;
margin: 0 5px;
display: inline-block;
}
ul li a{
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 16px;
display: inline-block;
vertical-align: middle;
transition: .5s;
background: #f1f1f1;
overflow: hidden;
}
ul li a i{
display: block;
width: 100%;
color: #777;
transition: .5s;
}
ul li:hover a i:nth-child(1){
transform: translateY(-50px);
}
ul li:hover a i:nth-child(2){
transform: translateY(-50px);
color: #fff;
}
ul li:hover:nth-child(1) a{
background: #3b5998;
}
ul li:hover:nth-child(2) a{
background: #00aced;
}
ul li:hover:nth-child(3) a{
background: #bc2a8d;
}
ul li:hover:nth-child(4) a{
background: #007bb6;
}
ul li:hover:nth-child(5) a{
background: #dd4b39;
}
Save all files and run index.html