Introduction of css social media icons
Here today, we are going to make the css social media icons have a hovering effect by following the simple and easy code of HTML (Hyper Text Markup Language) and CSS (CCascading Style Sheet) step by step. In this project, there will be 4 to 5 social media icons in a row. When the user hovers over a particular icon. The background color of that icon and icon color will change with some amazing effect. This project will help you a lot because almost every website developer or client needs to have social media icons to connect people with them, so you can also add this project to your website.
Now let’s start making this social media icons css with a hovering effect by just following the code of HTML and CSS. This will be not very complicated, everyone can understand it. No matter if he or she is a beginner or an experienced guy. If you have any problems while understanding the code. You can connect with us through the social media link given below to contact us.
HTML (Hypertext Markup Language)
First, we will make the structure of this Social Icons Hover Effect Css with the help of HTML (Hyper Text Markup Language). This is used to make the structure of a web page by writing their code. The response will be shown on the Chrome page. In this, we will first give the title of the page. Then make the internal structure of this page, in which there will be a parent div in which all the social media icons will be created. In this tag, we will make an anchor tag to attach the link to the icon of social media. Then there will also be an icon tag in which icons will be written. We will copy these icon tags and anchor tags and paste them four times for different Social Media Icons Html Css. We can use icons by adding the link to the font in HTML code copied from Google.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Icons Animation</title>
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul>
<li>
<a class="facebook" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="ri-facebook-fill"></i>
</a>
</li>
<li>
<a class="twitter" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="ri-twitter-x-fill"></i>
</a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com/gevstack/">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="ri-instagram-fill"></i>
</a>
</li>
<li>
<a class="google" href="#">
<span></span>
<span></span>
<span></span>
<span></span>
<i class="ri-google-fill"></i>
</a>
</li>
</ul>
</body>
</html>CSS (Cascading Style Sheet)
After making the structure of the Social Icons Hover Effect Css, we will now give it some styling with the help of CSS (CCascading Style Sheet). Which is very useful for designing and makes. The look of the website better than before (this is attached to the html file in the link tag). In this, we will first make the background black, and then we will move toward the main content of loading.
In main content of Social media icons css, we will take the parent div to the center of the screen and then take all the icons in one row of a parent div. Then we will adjust the size and positions of icons with their backgrounds. We will make the border circle and the original color of the icon in default case. When the user hovers on a particular icon, the background color. Color of the icon will change with amazing transition effects.
body {
margin:0;
padding:0;
background: #ebebeb;
}
ul {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
margin:0;
padding:0;
display:flex;
}
ul li {
list-style:none;
}
ul li a {
display:block;
position:relative;
width:100px;
height:100px;
line-height:100px;
font-size:40px;
text-align:center;
text-decoration:none;
color:#404040;
margin: 0 30px;
transition:.5s;
}
ul li a span {
position:absolute;
transition: transform .5s;
}
ul li a span:nth-child(1),
ul li a span:nth-child(3){
width:100%;
height:3px;
background:#404040;
}
ul li a span:nth-child(1) {
top:0;
left:0;
transform-origin: right;
}
ul li a:hover span:nth-child(1) {
transform: scaleX(0);
transform-origin: left;
transition:transform .5s;
}
ul li a span:nth-child(3) {
bottom:0;
left:0;
transform-origin: left;
}
ul li a:hover span:nth-child(3) {
transform: scaleX(0);
transform-origin: right;
transition:transform .5s;
}
ul li a span:nth-child(2),
ul li a span:nth-child(4){
width:3px;
height:100%;
background:#404040;
}
ul li a span:nth-child(2) {
top:0;
left:0;
transform:scale(0);
transform-origin: bottom;
}
ul li a:hover span:nth-child(2) {
transform: scale(1);
transform-origin: top;
transition:transform .5s;
}
ul li a span:nth-child(4) {
top:0;
right:0;
transform:scale(0);
transform-origin: top;
}
ul li a:hover span:nth-child(4) {
transform: scale(1);
transform-origin: bottom;
transition:transform .5s;
}
.facebook:hover {
color: #3b5998;
}
.facebook:hover span {
background: #3b5998;
}
.twitter:hover {
color: #1da1f2;
}
.twitter:hover span {
background: #1da1f2;
}
.instagram:hover {
color: #c32aa3;
}
.instagram:hover span {
background: #c32aa3;
}
.google:hover {
color: #dd4b39;
}
.google:hover span {
background: #dd4b39;
}
ul li a .twitter {
color: #1da1f2;
}
ul li a:hover:nth-child(3) {
color: #c32aa3;
}
ul li a:hover:nth-child(4) {
color: #dd4b39;
}Output of css social media icons
Finally, we have made a completely css social media icons with a hovering effect by following the code of HTML and CSS. You can now practice making such a project by taking ideas from us. Our main motive is to provide the best and most creative ideas to create your own Social Media Icons Html Css so you can enhance your knowledge in developing. If you want the source code, click on the button given below to download Social Media Icons Html Css.
For more explanation, click on the link given below to watch the video of Social Icon Css.
You can also check:
