Sticky Social Media Icons using HTML & CSS

Sticky Social Media Icons using HTML & CSS

Hello developers, today in this blog you'll learn to create Sticky Social Media Icons using HTML & CSS.

A sticky or fixed bar is a graphical UI element of the website, which is commonly used in many websites. Social media icons are used to increase the social engagement of the website. These social icons allow visitors to see all your social media pages and to share content on social media from where ever they are on your website.


In this blog (Sticky Social Media Icons), there are five social media icons that are Facebook, Twitter, Google, Linkedin, and YouTube are placed at the left middle of the web page. Can place any number of social media icons. When the user scrolls the page up or down, the social media icons will be fixed in that place, it won't move.


CSS border-radius property has been used to make the icons circular. All icons have their default logo color. When you hover on every icon, the color of the icon changes, and there will be a shadow on the icon.


The source code of this Sticky Social Media Icons is given below, if you want the source code of this program, you can copy it. You can use these Sticky social media icons with your creativity and can take this project to the next level.


Sticky Social Media Icons [Source Code]


To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.


<!DOCTYPE html> <html lang="us-en"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style.css"> <body> <div class="icon-bar"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <a href="#" class="google"><i class="fa fa-google"></i></a> <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> </div> <div class="content"> <h3>Learning Robo</h3> <p>The sticky social bar</p> <p> Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p> Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p> Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p> Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p> Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> <div class="credit">Made with <span style="color:tomato">&#10084;</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.

body {
margin:0;
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);  
}
.icon-bar {
  position: fixed;
  top: 50%;
  left:10px;
  border:none;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.icon-bar a {
  display: block;
  border:none;
  text-align: center;
  padding: 15px;
  transition: all 0.3s ease;
  color: white;
  margin-bottom:10px;
  font-size: 20px;
  border-radius: 50%;
}
.icon-bar a:hover {
  background-color: #12192c;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.facebook {
  background: #3B5998;
  color: white;
}
.twitter {
  background: #55ACEE;
  color: white;
}
.google {
  background: #dd4b39;
  color: white;
}
.linkedin {
  background: #007bb5;
  color: white;
}
.youtube {
  background: #bb0000;
  color: white;
}
.content {
  margin-left: 75px;
  margin-right: 25px;
  font-size: 30px;
}
.content > h3{
    background-color: #12192c;
    color:#FBAB7E;
    border-radius: 12px;
    width:25%;
    padding: 5px;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
    text-decoration: none;
    color:#000;
    font-weight: bold;
}

We hope you would like this Sticky Social Media Icons using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Sticky Social Media Icons using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.


Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome