SOCIAL MEDIA BUTTON

Run
<!DOCTYPE html>
<html>
<head>
<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>
   a {
      padding: 16px;
	  width: 50px;
	  text-align: center;
	  text-decoration: none;
	  margin: 5px 2px;
	  transition-duration: 0.4s;
   }
   a:hover {
	  opacity: 0.5;
}
  .fa-facebook {
    background: #3B5998;
    color: white;
	border-radius: 8px;
	font-size: 50px;
  }
  .fa-twitter {
    background: #55ACEE;
	border-radius: 8px;
    color: white;
	font-size: 50px;
	}
	.fa-linkedin {
	  background: #55AAEE;
	  border-radius: 8px;
      color: white;
	  font-size: 50px;
	}
	.fa-youtube {
	  background: #bb0000;
	  color: white;
	  font-size: 50px;
	  border-radius: 12px;
	  width: 70px;
	}
	
	
</style>
</head>
<body>
    <h3> Social Media button </h3>
   <a href="#" class="fa fa-facebook"></a> 
   <a href="#" class="fa fa-twitter"></a> 
   <a href="#" class="fa fa-linkedin"></a> 
   <a href="#" class="fa fa-youtube"></a>

</body>
</html>