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

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.

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

Code

You might also like