Hello readers, today in this blog we will read how to create Animated Social Media Button Using HTML and CSS. In this blog, you will learn how to create a floating social media icon with the help of HTML and CSS only.
As we know today that floating social media is installed in every website nowadays, which looks very beautiful to see, which gives a good look to our website. By applying these social media icons, we can go to different social media pages from our website by putting a link to our social media pages in it.
So we know how to make a social media icon
You might like this:
First of all we have taken a section tag under the body tag whose class name is class="icon-bar". Inside which a div tag is taken and class name of that div tag is given class="wrapper-1". Inside this div whose class name is class="wrapper-1" inside it we have taken four div.'s of these four div The class name is class="button" .
In which an anchor tag is taken, the job of the anchor tag is that to go to a link or any website and social media page, we put the url of that page inside the href attribute of the anchor tag, which gives us access to this link. On clicking, it takes us to that page, the page of which we url is del inside this anchor tag.
We have taken a div inside this anchor tag, whose class name is given differently, we know that we have taken four divs inside the class name class="wrapper-1", whose class name is class="button". Inside the anchor tag of the first div a div is taken whose class name is class="icon facebook" and inside this div an i tag is taken whose class name is class="fab fa-facebook-f" This class name is It means that we have used font awesome icon which we have given cdn link of font awesome inside head tag to use it. The icon that appears on our web browser. And inside the anchor tag, another tag has been taken, whose name is span tag, span tag is an inline tag, under this span tag the name of social media tag is written which you can see in the above image, similarly we have written the rest of the three. No is written whose class name is class="button".
You must have come to know by reading the above blog how the HTML code of this animated floating social media icon is written.
I hope you have understood after reading this. If you want to know better about this floating social media icons, then you can understand by watching this video of us which we have given below.
I hope you must have understood by watching the above video, which has been written step by step code, if you have given the code of this video below, which you can easily copy it by making a file under your system and make this floating You can see it on your browser by running the social media button
HTML CODE FILE :
<!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="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="icon-bar">
<div class="wrapper-1">
<div class="button">
<a href="#">
<div class="icon facebook">
<i class="fab fa-facebook-f"></i>
</div>
<span>facebook</span>
</a>
</div>
<div class="button">
<a href="#">
<div class="icon instagram">
<i class="fab fa-instagram"></i>
</div>
<span>Instagram</span>
</a>
</div>
<div class="button">
<a href="#">
<div class="icon youtube">
<i class="fab fa-youtube"></i>
</div>
<span>YouTube</span>
</a>
</div>
<div class="button">
<a href="#">
<div class="icon twitter">
<i class="fab fa-twitter"></i>
</div>
<span>Twitter</span>
</a>
</div>
</div>
</section>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #5C7DF3;
}
.icon-bar{
position: fixed;
left: 0;
top: 250px;
z-index: 99990;
}
.icon-bar .button{
width: 40px;
height: 40px;
cursor: pointer;
background: #fff;
overflow: hidden;
border-radius: 0px;
transition: all 0.3s ease-in-out;
box-shadow: 0 10px 10px #0000001a;
margin: 3px 0;
}
.icon-bar .button a{
text-decoration: none;
}
.icon-bar .button span{
font-size: 18px;
font-weight: 500;
line-height: 4px;
margin-left: 10px;
font-family: 'Roboto', sans-serif;
}
.icon-bar .button:hover{
width: 150px;
}
.icon-bar .button .icon{
width: 40px;
height: 40px;
text-align: center;
border-radius: 50px;
display: inline-block;
transition: all 0.3s ease-in-out;
}
.icon-bar .button .icon i{
font-size: 20px;
line-height: 40px;
transition: all 0.3s ease-in-out;
}
.icon-bar .button .facebook i{
color: #4267b2;
}
.icon-bar .button .instagram i{
color: #e1306c;
}
.icon-bar .button .youtube i{
color: #ff0000;
}
.icon-bar .button .twitter i{
color: #1da1f2;
}
.icon-bar .button:hover .facebook{
background: #4267b2;
}
.icon-bar .button:hover .instagram{
background: #e1306c;
}
.icon-bar .button:hover .youtube{
background: #ff0000;
}
.icon-bar .button:hover .twitter{
background: #1da1f2;
}
.icon-bar .button:nth-child(1) span{
color: #4267b2;
}
.icon-bar .button:nth-child(2) span{
color: #e1306c;
}
.icon-bar .button:nth-child(3) span{
color: #ff0000;
}
.icon-bar .button:nth-child(4) span{
color: #1da1f2;
}
.icon-bar .button:hover i{
color: #fff;
}
Post a Comment