【コピペ用】SNSボタンの設置

しんたけ

▼参考にしたサイト。

HTML

<ul class="snsbtniti">
<li><a href="TwitterURL" class="flowbtn7 fl_tw7"><i class="fab fa-twitter"></i></a></li>
<li><a href="インスタURL" class="flowbtn7 insta_btn7"><i class="fab fa-instagram"></i></a></li>
<li><a href="FacebookURL" class="flowbtn7 fl_fb7"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn7 fl_ma7"><i class="far fa-envelope"></i></a></li>
</ul>

Style Sheet

/* ボタン全体 */
.flowbtn7{
border-radius:50%;
position:relative;
display:inline-block;
width:30px;
height:30px;
font-size:18px;
color:#fff!important;
text-decoration:none;
transition:.5s;			
}
.fl_ma7{
font-size:26px;	
}
.insta_btn7{
font-size: 21px;
}
/* アイコン中央寄よせ*/
.flowbtn7 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* ボタン位置調整 */
.snsbtniti{
padding:0!important;
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
.snsbtniti li{
margin-right: 2%;
text-align:center !important;
}
/* ボタンにマウスを乗せた時 */
.flowbtn7:hover{
-webkit-transform:translateY(-3px);
-ms-transform:translateY(-3px);
transform:translateY(-3px);
}
/* 背景色設定 */
.fl_tw7,
.insta_btn7,
.fl_fb7,
.fl_ma7{
background:#ddd;
}

背景色設定するときに便利なプロパティ

mix-blend-mode: luminosity;


この記事が気に入ったらサポートをしてみませんか？