Demo for Social Sharing Buttons Code with Shadow

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
* {
  box-sizing: border-box;
}

html {
  height: 100%;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ddd;
}
.field {
  display: flex;
  width: 330px;
  justify-content: space-around;
}
.sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: none;
  transition-duration: 0.5s;
  transform: rotateX(45deg);
  box-shadow: 0px 10px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.sns-btn--twitter {
  background-color: #1da1f2;
}
.sns-btn--facebook {
  background-color: #3b5998;
}
.sns-btn--instagram {
  background-color: #dd2b75;
}
.sns-btn:hover {
  transform: scale(1.2);
  box-shadow: none;
}
.sns-btn__icon {
  font-size: 33px;
  letter-spacing: 0.1em;
  color: #fff;
}
</style>

</head>
<body>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<div class="field">
	<a class="sns-btn sns-btn--twitter">
		<i class="sns-btn__icon fab fa-twitter"></i>
	</a>	
	<a class="sns-btn sns-btn--facebook">
		<i class="sns-btn__icon fab fa-facebook-f"></i>
	</a>
	<a class="sns-btn sns-btn--instagram">
		<i class="sns-btn__icon fab fa-instagram"></i>
	</a>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

HTML Dynamic Social Buttons with Hover Effect

In this post, we have some social buttons in dark gray. During the hover, these buttons first have a circular background and then a square background.

Social Buttons Code with Dip Effect on Hover

The social buttons in this code have an orange theme. By placing one of these buttons during the hover, these buttons will sink.

Expanding Social Buttons Code at Page Bottom

There is a blue button at the bottom of the page and there is a plus icon on this button. By clicking on this button, the social buttons will be displayed . . .

HTML Dynamic Business Card with Social Icons

The social buttons in this code are located on a person's ID card. By moving the mouse, this card also moves a little in three-dimensional space.