<ul class="sns-list">

  <li><a class="flowbtn2 fl_tw1" href="#"><i class="fab fa-twitter"></i><span>Twitter</span></a></li>

  <li><a class="flowbtn2 fl_fb1" href="#"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>

  <li><a class="flowbtn2 fl_hb1" href="#"><i class="fas fa-bold"></i><span>Hatena</span></a></li>

  <li><a class="flowbtn2 fl_li1" href="#"><i class="fab fa-line"></i><span>LINE</span></a></li>

</ul>
/* ボタン全体 */
.flowbtn2{
  font-family:'Verdana',sans-serif;	
  border-radius:4px;
  position:relative;
  display:inline-block;
  width: calc(100% - 10px);
  font-size: 20px;
  color: #fff!important;
  text-decoration: none;
  margin-bottom: 10px;
  padding: 10px 0;
}
/* Twitter */
.fl_tw1{
  background:#55acee;
  }
/* Facebook */
.fl_fb1{
  background:#3b5998;
}
/* はてブ */
.fl_hb1{
  background:#1ba5dc;
}
/* LINE */
.fl_li1{
  background:#00c300;
}
/* アイコンボタンホバー時 */
.flowbtn2:hover span{
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
  text-decoration:none;
}
/* ボタン内テキスト調整 */
.flowbtn2 span{
  font-size:14px;	
  position:relative;
  left:8px;
  bottom:2px;
  transition:.6s;	
  display:inline-block;	
}
/* ulタグの内側余白を0にする */
ul.sns-list{
  padding:0!important;
  list-style:none!important;
}
/* アイコンボタンの位置調整 */
.sns-list{
  display:flex;
  flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
  .sns-list li{
  flex:0 0 50%;
  text-align:center!important;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.