Floating Social Media Icons Using HTML And CSS

Floating Social Media Icons Using HTML And CSS(Source Code)

Floating Social Media Icons Using HTML And CSS

Floating Social Media Icons Using HTML And CSS
Floating Social Media Icons Using HTML And CSS

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create Floating Social Media Icons. We use HTML and CSS for Floating Social Media Icons.

I hope you enjoy our blog so let’s start with a basic html structure for floating social media icons.

HTML Code For Floating Social Media Icons

 <!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>floating social media icons </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
</head>
<body>
<ul>
<li><a href="#"><i class="fab fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</body>
</html>

There is all the html code for the floating social media icons. Now, you can see output without css, then we write Css for styling floating social media icons.

Create Simple Portfolio Website Using HTML and CSS

Output

Floating Social Media Icons Using HTML And CSS
Floating Social Media Icons Using HTML And CSS

CSS Code For Floating Social Media Icons

 body {
margin:0;
padding:0;
background: #dedede;
}
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 {
position: relative;
width:60px;
height:60px;
display:block;
text-align:center;
margin:0 10px;
border-radius: 50%;
padding: 6px;
box-sizing: border-box;
text-decoration:none;
box-shadow: 0 10px 15px rgba(0,0,0,0.3);
background: linear-gradient(0deg, #ddd, #fff);
transition: .5s;
}
ul li a:hover {
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
text-decoration:none;
}
ul li a .fab {
widht: 100%;
height:100%;
display:block;
background: linear-gradient(0deg, #fff, #ddd);
border-radius: 50%;
line-height: calc(60px - 12px);
font-size:24px;
color: #262626;
transition: .5s;
}
ul li:nth-child(1) a:hover .fab {
color: #3b5998;
}
ul li:nth-child(2) a:hover .fab {
color: #00aced;
}
ul li:nth-child(3) a:hover .fab {
color: #dd4b39;
}
ul li:nth-child(4) a:hover .fab {
color: #007bb6;
}
ul li:nth-child(5) a:hover .fab {
color: #e4405f;
}

We have completed our Floating Social Media Icons Project. Here is our final updated output HTML + CSS.

10+ HTML CSS Projects For Beginners with Source Code

Final Output Of Floating Social Media Icons Using HTML And CSS

Floating Social Media Icons Using HTML And CSS
Floating Social Media Icons Using HTML And CSS

 

Restaurant Website Using HTML And CSS With Source Code

Here is our updated output with Html and Css. I hope you like these social media icons.; you can see output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create Floating Social Media Icons Using HTML And CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by – Code With Random/Anki 



Tags: , ,

Leave a Reply