https://idea-hack.com/en/blog/15242/
【Gutenberg Compatible】 Best  10 SNS style templates

【Gutenberg Compatible】 Best 10 SNS style templates

Beautiful Design lets user feel good, and stay on your site for a long time. And also, you will be easy to get repeat users.
In this Article. I will provide design templates of sns button.

Before Starting

About third party library

I will use following libraries. If you use my design recipes, please load these libraries before using.

  • Font Awesome5 (https://fontawesome.com)

Supported browser

Following browsers support sample code. These are same as Bootstrap4 and above..

Mobile Devices

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Desktop Devices

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Table source: Bootsteap4

Pattern1

html
<div class="sns_wrap">
<a href="#" class="snsbtn-pattern1 snsbtn-pattern1_tw mb-3"><span class="twicon"><i class="fab fa-twitter"></i></span> Follow Me</a>
<a href="#" class="snsbtn-pattern1 snsbtn-pattern1_fb mb-3"><span class="fbicon"><i class="fab fa-facebook-f"></i></span> Follow Me</a>
<a href="#" class="snsbtn-pattern1 snsbtn-pattern1_insta mb-3"><span class="insta"><i class="fab fa-instagram"></i></span> Follow Me</a>
</div>
css
div.sns_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

div.sns_wrap1 a {
margin-bottom: 15px;
}

div.sns_wrap a.snsbtn-pattern1 {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-size: 25px;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

div.sns_wrap a.snsbtn-pattern1:hover {
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

div.sns_wrap .snsbtn-pattern1_tw {
  color: #1da1f3;
}

div.sns_wrap .snsbtn-pattern1_tw:hover {
  color: #88daff;
}

div.sns_wrap .snsbtn-pattern1_tw .twicon {
  border-radius: 10px;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 50px;
  vertical-align: middle;
  color: #FFF;
  background: #1da1f3;
}

div.sns_wrap .snsbtn-pattern1_tw .twicon .fab {
  line-height: 50px;
}

div.sns_wrap .snsbtn-pattern1_fb {
  color: #4966a0;
}

div.sns_wrap .snsbtn-pattern1_fb:hover {
  color: #668ad8;
}

div.sns_wrap .snsbtn-pattern1_fb .fbicon {
  border-radius: 10px;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 50px;
  vertical-align: middle;
  color: #FFF;
  background: #4966a0;
}

div.sns_wrap .snsbtn-pattern1_fb .fbicon .fa-facebook {
  position: absolute;
  bottom: -3px;
  right: 6px;
  font-size: 42px;
}

div.sns_wrap .snsbtn-pattern1_insta {
  color: #2e6ca5;
}

div.sns_wrap .snsbtn-pattern1_insta:hover {
  color: #668ad8;
}

div.sns_wrap .snsbtn-pattern1_insta .insta {
  border-radius: 13px;
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  font-size: 35px;
  line-height: 50px;
  vertical-align: middle;
  background: -webkit-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
}

div.sns_wrap .snsbtn-pattern1_insta .insta:before {
  content: '';
  position: absolute;
  top: 23px;
  left: -18px;
  width: 60px;
  height: 60px;
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: -o-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}

div.sns_wrap .snsbtn-pattern1_insta .insta .fa-instagram {
  color: white;
  line-height: 50px;
  position: relative;
  z-index: 2;
}

Pattern2

html
<div class="sns_wrap2">
<a href="#" class="snsbtn-pattern_tw"><i class="fab fa-twitter"></i> <span>Follow Me</span></a>
<a href="#" class="snsbtn-pattern_fb"><i class="fab fa-facebook"></i> <span>Follow Me</span></a>
<a href="#" class="snsbtn-pattern_insta"><i class="fab fa-instagram"></i> <span>Follow Me</span></a>
</div>
css
div.sns_wrap2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
margin-bottom: 20px;
}

div.sns_wrap2 a.snsbtn-pattern_tw {
  color: #FFF;
  border-radius: 7px;
  display: inline-block;
  height: 50px;
  width: 190px;
  text-align: center;
  font-size: 25px;
  line-height: 50px;
  vertical-align: middle;
  background: #1da1f3;
  overflow: hidden;
  text-decoration: none;
  margin: 0 auto;
  margin-bottom: 10px;
}

div.sns_wrap2 a.snsbtn-pattern_tw .fa-twitter {
  text-shadow: 2px 2px 0px #4287d6;
  font-size: 30px;
}

div.sns_wrap2 a.snsbtn-pattern_tw span {
  display: inline-block;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

div.sns_wrap2 a.snsbtn-pattern_tw:hover {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

div.sns_wrap2 a.snsbtn-pattern_fb {
  color: #FFF;
  border-radius: 7px;
  display: inline-block;
  height: 50px;
  width: 190px;
  text-align: center;
  font-size: 25px;
  line-height: 50px;
  vertical-align: middle;
  background: #4966a0;
  overflow: hidden;
  text-decoration: none;
  margin: 0 auto;
  margin-bottom: 10px;
}

div.sns_wrap2 a.snsbtn-pattern_fb .fa-facebook {
  text-shadow: 2px 2px 1px #224282;
  font-size: 30px;
}

div.sns_wrap2 a.snsbtn-pattern_fb span {
  display: inline-block;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

div.sns_wrap2 a.snsbtn-pattern_fb:hover span {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

div.sns_wrap2 a.snsbtn-pattern_insta {
  color: #FFF;
  border-radius: 7px;
  position: relative;
  display: inline-block;
  height: 50px;
  width: 190px;
  text-align: center;
  font-size: 25px;
  line-height: 50px;
  vertical-align: middle;
  background: -webkit-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
  text-decoration: none;
  margin: 0 auto;
  margin-bottom: 10px;
}

div.sns_wrap2 a.snsbtn-pattern_insta:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(75deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: -o-linear-gradient(75deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

div.sns_wrap2 a.snsbtn-pattern_insta .fa-instagram {
  font-size: 35px;
  position: relative;
  top: 4px;
}

div.sns_wrap2 a.snsbtn-pattern_insta span {
  display: inline-block;
  position: relative;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

div.sns_wrap2 a.snsbtn-pattern_insta:hover span {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

@media screen and (min-width: 768px) {
  div.sns_wrap2 {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  div.sns_wrap2 a {
    margin-bottom: 10px;
  }
}

Pattern3