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...