<ul class="sns-list">

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

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

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

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

</ul>
/* ボタン全体 */
.flowbtn1{
  border-radius:50%;
  position:relative;
  display:inline-block;
  width:50px;
  height:50px;
  font-size:30px;
  color:#fff!important;
  text-decoration:none;
  transition:.5s;
}

.flowbtn1 i{
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  transform:translate(-50%,-50%);
}

ul.sns-list{
  padding:0!important;
  list-style:none!important;
}

.sns-list{
  display:flex;
  flex-flow:row wrap;
}

.sns-list li{
  text-align:center !important;
  margin:10px;
}
.flowbtn1:hover{
  -webkit-transform:translateY(-5px);
  -ms-transform:translateY(-5px);
  transform:translateY(-5px);
}

/* Twitter */
.fl_tw1{
  background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}

/* Facebook */
.fl_fb1{
  background: linear-gradient(135deg, #6699ff 0%,#3b5998 100%);
}
/* はてブ */
.fl_hb1{
  background: linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
  font-size:25px;
}
/* LINE */
.fl_li1{
  background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}

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.