How to create sticky social media sharing buttons with HTML and CSS
HTML

How to create sticky social media sharing buttons with HTML and CSS

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

In today’s tutorial, we’re going to take a look at how to create social media sharing buttons with HTML and CSS.

Code

<!DOCTYPE html>
<html>
<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">
<style>
body {
    margin:0px;
}

.social-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.social-bar a {
  display: block;
  text-align: center;
  padding: 15px;
  transition-duration: 0.5s;
  color: white;
  font-size: 20px;
  width: 20px;
}

.social-bar a:hover {
  background-color: teal;
  padding: 15px 25px;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.content {
  margin-left: 70px;
  font-size: 32px;
}
</style>
<body>

<div class="social-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="linkedin"><i class="fa fa-linkedin"></i></a>
  <a href="#" class="youtube"><i class="fa fa-youtube"></i></a> 
</div>

<div class="content">
  <p>This is a page with social media share buttons. Bring the cursor over them to see the changes.</p>
  
</div>

</body>
</html> 

This is a page with social media share buttons. Bring the cursor over them to see the changes.