<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;
}
This Pen doesn't use any external JavaScript resources.