Creating Social Media Icons / Buttons Using HTML & CSS.
Hello Friends , In this blog you'll learn how to create social media buttons / icons using only HTML & CSS.
When you hover on icon / buttons it will show the color effect.
*Note : Create two files 1st one is HTML file and 2nd one is CSS file and save these two files with its extensions as,
HTML file : index.html
CSS file : style.css
HTML and CSS code is as follows :
HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8bit-code</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="social-media">
<a href="#"><i class="fa fa-facebook-square"></i></a>
<a href="#"><i class="fa fa-twitter-square"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-youtube-play"></i></a>
<a href="#"><i class="fa fa-snapchat"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-google-plus-official"></i></a>
<a href="#"><i class="fa fa-whatsapp"></i></a>
<a href="#"><i class="fa fa-telegram"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</div>
</body>
</html>
CSS Code (style.css)
/* Created by 8bit-code */
*{
padding: 0;
margin: 0;
}
body{
background: #161616;
display: flex;
}
.social-media{
background: #4e4949;
display: inline-block;
text-align: center;
margin: 150px auto;
}
a{
color: white;
font-size: 35px;
margin: 20px;
}
i{
background: #3b3c36;
padding: 10px;
margin: 15px;
border-radius: 12px;
}
i:hover{
box-shadow: 3px 4px 5px 2px #161616;
}
.fa.fa-facebook-square:hover{
background: #3b5998;
}
.fa.fa-twitter-square:hover{
background: #55acee;
}
.fa.fa-instagram:hover{
background: linear-gradient(45deg, #fafa00, #bb02ff);
}
.fa.fa-youtube-play:hover{
background: #cd201f;
}
.fa.fa-snapchat:hover{
background: #fffa37;
}
.fa.fa-linkedin:hover{
background: #0077b5;
}
.fa.fa-google-plus-official:hover{
background: #dc4e41;
}
.fa.fa-whatsapp:hover{
background: #43d854;
}
.fa.fa-telegram:hover{
background: #00405d;
}
.fa.fa-pinterest:hover{
background: #bd081c;
}
If you have any problems while creating this social media icons / buttons you can watch this video.
we are done here. Thank you for showing interest in this blog.
0 Comments