2022.02.10 （更新日:2022.06.06）

【css】SNS用フォローボタン２種類の解説です。

シンプルに力強く。

数多くあるSNSボタン。
今回は私の厳選SNSボタンを紹介します。
カラーボタンはマウスを重ねると色が反転します。
モノクロボタンは平面的でシンプルなデザインです。
二つともとても気に入ってます。

丸いカラーのSNSボタンとシンプルなピクトグラム風のSNSボタンデザインの紹介です。

固定ページプロフィール用の丸カラーボタンから紹介します。

私はフォローボタンとして使用してます。

headerの間に下記コードを記載してください。

httpsのコードなので外部読み込みです。


<script src="https://kit.fontawesome.com/b1e81adc1e.js" crossorigin="anonymous"></script>

本文（content）に下記コードを記載。

記事本文ですよ。



<ul class="snsbtniti">

        <li><a href="https://twitter.com/sinjotigers" class="flowbtn4 fl_tw2">
                  <i class="fab fa-twitter"></i><div>Twitter</div></a></li>

        <li><a href="https://www.instagram.com/sinjotigers/" class="flowbtn4 insta_btn2">
                  <i class="fab fa-instagram"></i><div>Instagram</div></a></li>

        <li><a href="https://www.youtube.com/user/sinjonrp/featured" class="flowbtn4 fl_yu2">
                  <i class="fab fa-youtube"></i><div>YouTube</div></a></li>

</ul>

cssに下記コードを記載。

外観→テーマファイルエディタ→スタイルシートのstyle.cssに記載します。


/* ボタン全体の装飾 */
.flowbtn4{
font-family:'Trebuchet MS',sans-serif;/* 好きなフォントに変えてね */
border-radius:50%;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
/* ボタンマウスホバー時テキストカラー */
.flowbtn4:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn4.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn4.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn4.insta_btn2 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn4.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}

/* YouTube */
.flowbtn4.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn4.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* ボタン内テキスト調整 */
.flowbtn4 div{
font-size:11px;	
font-weight:bold;
position:relative;
bottom:0px;		
}
.fab{
	margin-top:10px;
}
/* ボタンの位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:flex-end;
padding-right:50px;
}
/* ボタン同士の余白 */
.snsbtniti li{
	text-align:center;
	letter-spacing:0em;
	padding-right:10px;
  list-style-type:none;
}
@media screen and (max-width:568px){
	.snsbtniti{
	padding-right:10px;
}
.flowbtn4{
	width:60px;
	height:60px;
}
.flowbtn4 div{
	display:none;
}
.fab{
	margin-top:15px;
}
}

codepen用です。

sinjotigersは私のアカウントです。

See the Pen
Untitled by マージン (@sinjotigers)
on CodePen.

続いてfooterで使用しているSNSボタン。平面的なデザインです。

これもフォロー用として使用してます。