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 a simple social media sharing buttons with HTML and CSS.

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.


Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.