DevAnswer - Developers Answer

Social Sharing Buttons Code with Shadow

4th November

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