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

3 comments: