Sticky Social Media Bar using HTML CSS in 2020
Welcome, In this tutorial I will show you, how we can create an awesome Sticky Social Media Bar using HTML CSS in 2020.
But Before going into it. I will like to make it clear that you should be familiar with the core concept of CSS and CSS3. i.e animation, transform, position, z-index etc. By the way, don't worry I already have videos on all the topics I just mention here. so check out my channel for this here ThapaTechnical
Here is the Source Code
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="icon-bar">
<a href='#' class='facebook' target='_blank'>
click here to visit <i class=" fab fa-facebook-square"></i>
</a>
<a href='#' class='twitter' target='_blank'>
click here to visit<i class=" fab fa-twitter-square"></i>
</a>
<a href='https://www.instagram.com/vinodthapa55/' class='instagram' target='_blank'>
click here to visit<i class="fab fa-instagram"></i>
</a>
<a href='' class='linkedin' target='_blank'>
click here to visit<i class=" fab fa-linkedin"></i>
</a>
<a href='https://www.youtube.com/thapatechnical' class='youtube' target='_blank'>
click here to visit<i class=" fab fa-youtube-square"></i></a>
</div>
</body>
</html>
style.css file
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Source Sans Pro', sans-serif;
}
.icon-bar {
position: fixed;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
z-index: 10;
}
a {
text-decoration: none;
width: 210px;
background: #3b5999;
color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 5px;
font-size: 20px;
transform: translateX(-170px);
-webkit-transform: translateX(-170px);
-ms-transform: translateX(-170px);
transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
}
.facebook {
background: #3b5998;
}
.twitter {
background: #00aced;
}
.instagram {
background: #e4405f;
}
.youtube {
background: #cd201f;
}
.linkedin {
background: #0077B5;
}
a i {
padding-left: 20px;
font-size: 30px !important;
animation: letszoom 3s linear alternate-reverse infinite;
}
@keyframes letszoom {
from {
transform: scale(0.8);
}
to {
transform: scale(1);
}
}
a:hover {
transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
}
sir very nice
ReplyDeleteGood
ReplyDeleteAusome sir
ReplyDeleteLessons on how to use social media from the movie "Chef". Ten tips on social media that you can apply to your business to help attract, win and retain even more profitable customers by using powerful marketing tools such as Tweeting, YouTube, Instagram and Vine. Free TikTok Views
ReplyDeleteGet Your Social Account's Followers, Likes And Promotions at One Place Instantly 100% Safe Our service help you build your business, get your social media content around the world and become famous. It offers you all the services you will need for Youtube, Facebook, Twitter, Instagram and other Services. spotify followers
ReplyDeleteWith the popularity of the TikTok, more and more people have decided to move on it to try to conquer new users and earn with TikTok. popularity of the TikTok
ReplyDeleteGreat Information sharing .. I am very happy to read this article .. thanks for giving us go through info.Fantastic nice. I appreciate this post. buy spotify streams
ReplyDeleteThanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. acheter des abonnés
ReplyDeleteNice blog and absolutely outstanding. You can do something much better but i still say this perfect.Keep trying for the best. acheter des abonnés
ReplyDeleteMoving organizations to the web is anything but a poorly conceived notion. Web applications offer another approach to work and backing how you work through close to home web email records and internet providers. download tt videos
ReplyDeleteTo be best in social media, it is useful to think about its segments as shaping a 3D square, with social and media as two of the sides. https://mamabee.com/smm-aka-social-media-panel-why-they-are-perfect-for-any-influencer/
ReplyDelete