THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Sticky Social Media Bar using HMTL and CSS in 2020

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);
}

11 comments:

  1. Lessons 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

    ReplyDelete
  2. Get 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

    ReplyDelete
  3. With 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

    ReplyDelete
  4. Great 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

    ReplyDelete
  5. Thanks 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

    ReplyDelete
  6. Nice 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

    ReplyDelete
  7. Moving 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

    ReplyDelete
  8. To 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