https://idea-hack.com/code/en/blog/107246/

【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

[sociallocker id=”23776″]

 
html
<div class="sns_wrap3">
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_tw"><i class="fab fa-twitter"></i></a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_fb"><i class="fab fa-facebook"></i></a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_insta"><i class="fab fa-instagram"></i></a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_feedly"><i class="fas fa-rss"></i></a>
</div>
css
div.sns_wrap3 {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-bottom: 20px;
}
div.sns_wrap3 a.snsbtn-pattern_common {
  display: inline-block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  color: #FFF;
  width: 50px;
  height: 50px;
  line-height: 30px;
  padding: 5px;
  font-size: 25px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  -webkit-box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18);
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}
div.sns_wrap3 a.snsbtn-pattern_common .fab {
  line-height: 30px;
}
div.sns_wrap3 a.snsbtn-pattern_common:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}
div.sns_wrap3 a.snsbtn-pattern_tw {
  background: #1da1f3;
  border: solid 5px #1da1f3;
}
div.sns_wrap3 a.snsbtn-pattern_fb {
  background: #3b75d4;
  border: solid 5px #3b75d4;
}
div.sns_wrap3 a.snsbtn-pattern_insta {
  background: #ef4d4d;
  border: solid 5px #ef4d4d;
}
div.sns_wrap3 a.snsbtn-pattern_feedly {
  background: #7ece46;
  border: solid 5px #7ece46;
}

Pattern4

html
<div class="sns_wrap4">
<a href="#" class="snsbtn-pattern_common">
    <span class="icon tw"><i class="fab fa-twitter"></i></span><span class="icontext">TWEET</span>
</a>
<a href="#" class="snsbtn-pattern_common">
    <span class="icon fb"><i class="fab fa-facebook"></i></span><span class="icontext">SHARE</span>
</a>
<a href="#" class="snsbtn-pattern_common">
    <span class="icon pocket"><i class="fab fa-get-pocket"></i></span><span class="icontext">POCKET</span>
</a>
<a href="#" class="snsbtn-pattern_common">
    <span class="icon feedly"><i class="fas fa-rss"></i></span><span class="icontext">FEEDLY</span>
</a>
</div>
css
div.sns_wrap4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
margin-bottom: 20px;
}
div.sns_wrap4 a.snsbtn-pattern_common {
  color: #484848;
  display: block;
  font-size: 20px;
  background: #eaeef1;
  text-decoration: none;
  margin-bottom: 10px;
}
div.sns_wrap4 a.snsbtn-pattern_common:hover .icon .fab, div.sns_wrap4 a.snsbtn-pattern_common:hover .icon .fas {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
div.sns_wrap4 a.snsbtn-pattern_common .icon {
  display: inline-block;
  width: 50px;
  text-align: center;
  color: white;
}
div.sns_wrap4 a.snsbtn-pattern_common .icon .fab, div.sns_wrap4 a.snsbtn-pattern_common .icon .fas {
  font-size: 20px;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
div.sns_wrap4 a.snsbtn-pattern_common .tw {
  background-color: #1da1f3;
}
div.sns_wrap4 a.snsbtn-pattern_common .fb {
  background-color: #3b75d4;
}
div.sns_wrap4 a.snsbtn-pattern_common .feedly {
  background-color: #7ece46;
}
div.sns_wrap4 a.snsbtn-pattern_common .pocket {
  background-color: #fd7171;
}
div.sns_wrap4 a.snsbtn-pattern_common .icontext {
  padding: 0 10px;
}
@media screen and (min-width: 768px) {
  div.sns_wrap4 {
    -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_wrap4 a {
    margin-bottom: 10px;
  }
}

Pattern5

html
<div class="sns_wrap5">
<a href="#" class="snsbtn-pattern_common">
    <span class="icon tw"><i class="fab fa-twitter"></i></span><span class="icontext">TWEET</span>
</a>
<a href="#" class="snsbtn-pattern_common">
    <span class="icon fb"><i class="fab fa-facebook"></i></span><span class="icontext">SHARE</span>
</a>
<a href="#" class="snsbtn-pattern_common">
    <span class="icon pocket"><i class="fab fa-get-pocket"></i></span><span class="icontext">POCKET</span>
</a>
<a href="#" class="snsbtn-pattern_common">
    <span class="icon feedly"><i class="fas fa-rss"></i></span><span class="icontext">FEEDLY</span>
</a>
</div>
css
div.sns_wrap5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
margin-bottom: 20px;
}
div.sns_wrap5 a.snsbtn-pattern_common {
  color: #484848;
  display: block;
  font-size: 20px;
  background: #eaeef1;
  text-decoration: none;
  margin-bottom: 10px;
}
div.sns_wrap5 a.snsbtn-pattern_common:hover {
  -webkit-transform: translateY(4px);
  -ms-transform: translateY(4px);
  transform: translateY(4px);
}
div.sns_wrap5 a.snsbtn-pattern_common .icon {
  display: inline-block;
  width: 50px;
  text-align: center;
  color: white;
}
div.sns_wrap5 a.snsbtn-pattern_common .icon .fab, div.sns_wrap5 a.snsbtn-pattern_common .icon .fas {
  font-size: 20px;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
div.sns_wrap5 a.snsbtn-pattern_common .tw {
  background-color: #1da1f3;
  border-bottom: solid 4px #1484ca;
}
div.sns_wrap5 a.snsbtn-pattern_common .fb {
  background-color: #3b75d4;
  border-bottom: solid 4px #2a5caf;
}
div.sns_wrap5 a.snsbtn-pattern_common .feedly {
  background-color: #7ece46;
  border-bottom: solid 4px #65b130;
}
div.sns_wrap5 a.snsbtn-pattern_common .pocket {
  background-color: #fd7171;
  border-bottom: solid 4px #ef4d4d;
}
div.sns_wrap5 a.snsbtn-pattern_common .icontext {
  padding: 0 10px;
}
@media screen and (min-width: 768px) {
  div.sns_wrap5 {
    -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_wrap5 a {
    margin-bottom: 10px;
  }
}

Pattern6

 
html
<div class="sns_wrap6">
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_tw">
  <span class="fa-stack">
    <i class="fas fa-certificate fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_fb">
  <span class="fa-stack">
    <i class="fas fa-certificate fa-stack-2x"></i>
    <i class="fab fa-facebook fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_pocket">
  <span class="fa-stack">
    <i class="fas fa-certificate fa-stack-2x"></i>
    <i class="fab fa-get-pocket fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_feedly">
  <span class="fa-stack">
    <i class="fa fa-certificate fa-stack-2x"></i>
    <i class="fa fa-rss fa-stack-1x"></i>
  </span>
</a>
</div>
css
div.sns_wrap6 {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-bottom: 20px;
}
div.sns_wrap6 a.snsbtn-pattern_common {
  display: inline-block;
  text-decoration: none;
  font-size: 25px;
}
div.sns_wrap6 a.snsbtn-pattern_common .fa-stack-1x {
  color: white;
  font-size: 18px;
}
div.sns_wrap6 a.snsbtn-pattern_common .fa-stack-2x {
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
div.sns_wrap6 a.snsbtn-pattern_common:hover .fa-stack-2x {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
div.sns_wrap6 a.snsbtn-pattern_tw .fa-certificate {
  color: #74c1f8;
}
div.sns_wrap6 a.snsbtn-pattern_fb .fa-certificate {
  color: #668ad8;
}
div.sns_wrap6 a.snsbtn-pattern_pocket .fa-certificate {
  color: #f79393;
}
div.sns_wrap6 a.snsbtn-pattern_feedly .fa-certificate {
  color: #acde71;
}

Pattern7

 
html
<div class="sns_wrap7">
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_tw">
  <span class="fa-stack">
    <i class="fas fa-tablet fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_fb">
  <span class="fa-stack">
    <i class="fa fa-tablet fa-stack-2x"></i>
    <i class="fab fa-facebook fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_pocket">
  <span class="fa-stack">
    <i class="fa fa-tablet fa-stack-2x"></i>
    <i class="fab fa-get-pocket fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_feedly">
  <span class="fa-stack">
    <i class="fa fa-tablet fa-stack-2x"></i>
    <i class="fa fa-rss fa-stack-1x"></i>
  </span>
</a>
</div>
css
div.sns_wrap7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-bottom: 20px;
}
div.sns_wrap7 a.snsbtn-pattern_common {
  text-decoration: none;
  font-size: 18px;
}
div.sns_wrap7 a.snsbtn-pattern_common .fa-stack-1x {
  display: inline-block;
  position: relative;
  -webkit-transition: .4s;
  -o-transition: .4s;
  transition: .4s;
  color: #fff;
}
div.sns_wrap7 a.snsbtn-pattern_common:hover .fa-stack-1x {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
div.sns_wrap7 a.snsbtn-pattern_tw .fa-stack-2x {
  color: #74c1f8;
}
div.sns_wrap7 a.snsbtn-pattern_fb .fa-stack-2x {
  color: #668ad8;
}
div.sns_wrap7 a.snsbtn-pattern_pocket .fa-stack-2x {
  color: #f79393;
}
div.sns_wrap7 a.snsbtn-pattern_feedly .fa-stack-2x {
  color: #acde71;
}

Pattern8

 
html
<div class="sns_wrap8">
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_tw">
  <span class="fa-stack">
    <i class="fab fa-twitter fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_fb">
  <span class="fa-stack">
    <i class="fab fa-facebook fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_pocket">
  <span class="fa-stack">
    <i class="fab fa-get-pocket fa-stack-1x"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_feedly">
  <span class="fa-stack">
    <i class="fa fa-rss fa-stack-1x"></i>
  </span>
</a>
</div>
css
div.sns_wrap8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-bottom: 20px;
}
div.sns_wrap8 a.snsbtn-pattern_common {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
div.sns_wrap8 a.snsbtn-pattern_common:hover {
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
div.sns_wrap8 a.snsbtn-pattern_common:hover .fa-stack-1x {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
div.sns_wrap8 a.snsbtn-pattern_tw {
  color: #22b8ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#aeecff), to(#57c8ff));
  background-image: -webkit-linear-gradient(#aeecff 0%, #57c8ff 100%);
  background-image: -o-linear-gradient(#aeecff 0%, #57c8ff 100%);
  background-image: linear-gradient(#aeecff 0%, #57c8ff 100%);
}
div.sns_wrap8 a.snsbtn-pattern_tw .fa-stack-2x {
  color: #74c1f8;
}
div.sns_wrap8 a.snsbtn-pattern_fb {
  color: #6183f3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#b5d3ff), to(#6b8bff));
  background-image: -webkit-linear-gradient(#b5d3ff 0%, #6b8bff 100%);
  background-image: -o-linear-gradient(#b5d3ff 0%, #6b8bff 100%);
  background-image: linear-gradient(#b5d3ff 0%, #6b8bff 100%);
}
div.sns_wrap8 a.snsbtn-pattern_fb .fa-stack-2x {
  color: #668ad8;
}
div.sns_wrap8 a.snsbtn-pattern_pocket {
  color: #ff6d82;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffcfd7), to(#ff7285));
  background-image: -webkit-linear-gradient(#ffcfd7 0%, #ff7285 100%);
  background-image: -o-linear-gradient(#ffcfd7 0%, #ff7285 100%);
  background-image: linear-gradient(#ffcfd7 0%, #ff7285 100%);
}
div.sns_wrap8 a.snsbtn-pattern_pocket .fa-stack-2x {
  color: #f79393;
}
div.sns_wrap8 a.snsbtn-pattern_feedly {
  color: #60d245;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#b9ffca), to(#80e067));
  background-image: -webkit-linear-gradient(#b9ffca 0%, #80e067 100%);
  background-image: -o-linear-gradient(#b9ffca 0%, #80e067 100%);
  background-image: linear-gradient(#b9ffca 0%, #80e067 100%);
}
div.sns_wrap8 a.snsbtn-pattern_feedly .fa-stack-2x {
  color: #acde71;
}

Pattern9

 
html
<div class="sns_wrap9">
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_tw">
  <span class="fa-stack">
    <i class="fab fa-twitter"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_fb">
  <span class="fa-stack">
    <i class="fab fa-facebook"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_pocket">
  <span class="fa-stack">
    <i class="fab fa-get-pocket"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_feedly">
  <span class="fa-stack">
    <i class="fa fa-rss"></i>
  </span>
</a>
</div>
css
div.sns_wrap9 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-bottom: 20px;
}
div.sns_wrap9 a.snsbtn-pattern_common {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  margin: 2px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color: white;
  border-radius: 12px;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  font-weight: bold;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}
div.sns_wrap9 a.snsbtn-pattern_common:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}
div.sns_wrap9 a.snsbtn-pattern_tw {
  background-color: #22b8ff;
}
div.sns_wrap9 a.snsbtn-pattern_fb {
  background-color: #6680d8;
}
div.sns_wrap9 a.snsbtn-pattern_pocket {
  background-color: #ff6d82;
}
div.sns_wrap9 a.snsbtn-pattern_feedly {
  background-color: #7bda72;
}

Pattern10

 
html
<div class="sns_wrap10">
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_tw">
  <span class="fa-stack">
    <i class="fab fa-twitter"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_fb">
  <span class="fa-stack">
    <i class="fab fa-facebook"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_pocket">
  <span class="fa-stack">
    <i class="fab fa-get-pocket"></i>
  </span>
</a>
<a href="#" class="snsbtn-pattern_common snsbtn-pattern_feedly">
  <span class="fa-stack">
    <i class="fa fa-rss"></i>
  </span>
</a>
</div>
css
div.sns_wrap10 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px;
}
div.sns_wrap10 a.snsbtn-pattern_common {
  text-align: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  color: #fff;
}
div.sns_wrap10 a.snsbtn-pattern_common:hover {
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
  opacity: .8;
}
div.sns_wrap10 a.snsbtn-pattern_tw {
  background-color: #22b8ff;
}
div.sns_wrap10 a.snsbtn-pattern_fb {
  background-color: #6680d8;
}
div.sns_wrap10 a.snsbtn-pattern_pocket {
  background-color: #ff6d82;
}
div.sns_wrap10 a.snsbtn-pattern_feedly {
  background-color: #7bda72;
}

[/sociallocker]