MENU

サンプル投稿

WordPress
当ページのリンクには広告が含まれています。

フォントなしアプリアイコン風ボタン

コードを表示する
<ul class="snsbtniti">

<li>
<a href="エックスのプロフィールURL" class="flowbtn3 my_x1">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn3 my_instagram1">
<i class="fa-brands fa-instagram"></i>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn3 my_facebook1">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn3 my_youtube1">
<i class="fab fa-youtube"></i>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn3 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn3 my_amazon1">
<i class="fa-brands fa-amazon"></i>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn3 my_line1">
<i class="fa-brands fa-line"></i>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn3 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn3 my_hatena1">
<i class="fa-solid fa-b"></i>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn3 my_pocket1">
<i class="fab fa-get-pocket"></i>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn3 my_feedly1">
<i class="fa-solid fa-rss"></i>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn3 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn3 my_linkedin1">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn3 my_discord1">
<i class="fa-brands fa-discord"></i>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn3 my_podcast1">
<i class="fa-solid fa-podcast"></i>
</a>
</li>

</ul>

flowbtnを3に変更しています。
フォントを指定していた<div>〇〇</div>タグを削除しました。

/* ボタン全体の外枠指定 */
.snsbtniti {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
flex: 0 0 33%;/* ボタンを3つ並びへ */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn3 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 60px;/* 背景横幅 */
height: 60px; /* 背景高さ */
font-size: 35px;
border-radius: 13px;/* ボタンの角を丸く */
transition: .5s;
text-decoration: none;
color: #fff;/* アイコンカラー */
margin-bottom:10px;/* ボタン下の余白 */
}

/* アイコンの位置を真ん中へ */
.flowbtn3 i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* Amazon・楽天アイコンを少し大きく */
.flowbtn3 i.fa-brands.fa-amazon,.flowbtn3 .fa-regular.fa-registered {
font-size: 40px;
}
/*インスタアイコンを少し大きく */
.flowbtn3 i.fa-brands.fa-instagram{
font-size: 45px;
}

/* ボタンのマウスホバー時少し浮き上がる */
.flowbtn3:hover {
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration: none;
cursor: pointer;
}

/* エックス背景 */
.my_x1 {
background: #000;
}

/* Instagram背景 */
.my_instagram1 {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook背景 */
.my_facebook1 {
background: #1877f2;
}

/* YouTube背景 */
.my_youtube1 {
background: #da1725;
}

/* TikTok背景 */
.my_tiktok1 {
background: #000;
}

/* Amazon背景 */
.my_amazon1 {
background: #ff9900;
}

/* LINE背景 */
.my_line1 {
background: #00b900;
}

/* ピンタレスト背景 */
.my_pinterest1 {
background: #bd081c;
}

/* はてブ背景 */
.my_hatena1 {
background: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena1 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket背景 */
.my_pocket1 {
background: #ef3f56;
}

/* Feedly背景 */
.my_feedly1 {
background: #6cc655;
}

/* 楽天ROOM背景 */
.my_rakutenroom1 {
background: #c61d79;
}

/* リンクドイン背景 */
.my_linkedin1 {
background: #0a66c2;
}

/* ディスコード背景 */
.my_discord1 {
background: #7289da;
}

/* Podcast背景 */
.my_podcast1 {
background: #813BF2;
}

.flowbtn3の横幅：widthと高さ：heightを揃え、角の丸み：border-radiusを少し強めに指定しました。
.flowbtn3 iでアイコンの位置が真ん中にくるようにしています。
そのほかInstagramのアイコンをより大きく、Facebook・Amazon・楽天アイコンも少し大きくしています。

⑥枠線バージョン

コードを表示する
<ul class="snsbtniti">

<li>
<a href="エックスのプロフィールURL" class="flowbtn4 my_x2">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn4 my_instagram2">
<i class="fa-brands fa-instagram"></i>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn4 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn4 my_youtube2">
<i class="fab fa-youtube"></i>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn4 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn4 my_amazon2">
<i class="fa-brands fa-amazon"></i>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn4 my_line2">
<i class="fa-brands fa-line"></i>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn4 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn4 my_hatena2">
<i class="fa-solid fa-b"></i>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn4 my_pocket2">
<i class="fab fa-get-pocket"></i>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn4 my_feedly2">
<i class="fa-solid fa-rss"></i>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn4 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn4 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn4 my_discord2">
<i class="fa-brands fa-discord"></i>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn4 my_podcast2">
<i class="fa-solid fa-podcast"></i>
</a>
</li>

</ul>

flowbtnを4,my_〇〇を2に変更してあります。
フォントを指定していた<div>〇〇</div>タグを削除しました。

/* ボタン全体の外枠指定 */
.snsbtniti {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
flex: 0 0 33%; /* 並べるボタンの数 */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn4 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 60px;/* 背景横幅 */
height: 60px; /* 背景高さ */
font-size: 35px;
border-radius: 13px;/* ボタンの角の丸みを強く */
transition: .5s;
text-decoration: none;
margin-bottom:10px;/* ボタン下の余白 */
}

/* アイコンをど真ん中へ */
.flowbtn4 i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn4:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
}

/*インスタアイコンを少し大きく */
.flowbtn4 i.fa-brands.fa-instagram{
font-size: 45px;
}

/* Amazon・楽天アイコンを少し大きく */
.flowbtn4 i.fa-brands.fa-amazon,.flowbtn4 .fa-regular.fa-registered {
font-size: 40px;
}

/* エックス枠線 */
.my_x2 {
border: solid 1px #000;
color: #000;
}
/* エックスマウスホバー時 */
.my_x2:hover{
border: solid 1px #000;
background-color: #000;
}

/* Instagram枠線 */
.my_instagram2{
border:solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.my_instagram2:hover {
border: solid 1px #c6529a;
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook枠線 */
.my_facebook2 {
border: solid 1px #1877f2;
color: #1877f2;
}
/* Facebookマウスホバー時 */
.my_facebook2:hover {
border: solid 1px #1877f2;
background-color: #1877f2;
}

/* YouTube枠線 */
.my_youtube2 {
border: solid 1px #da1725;
color: #da1725;
}
/* YouTubeマウスホバー時 */
.my_youtube2:hover {
border: solid 1px #da1725;
background-color: #da1725;
}

/* TikTok枠線 */
.my_tiktok2 {
border: solid 1px #000;
color: #000;
}
/* TikTokマウスホバー時 */
.my_tiktok2:hover {
border: solid 1px #000;
background-color: #000;
}

/* Amazon枠線 */
.my_amazon2 {
border: solid 1px #ff9900;
color: #ff9900;
}
/* Amazonマウスホバー時 */
.my_amazon2:hover {
border: solid 1px #ff9900;
background-color: #ff9900;
}

/* LINE枠線 */
.my_line2 {
border: solid 1px #00b900;
color: #00b900;
}
/* LINEマウスホバー時 */
.my_line2:hover {
border: solid 1px #00b900;
background-color: #00b900;
}

/* ピンタレスト枠線 */
.my_pinterest2 {
border: solid 1px #bd081c;
color: #bd081c;
}
/* ピンタレストマウスホバー時 */
.my_pinterest2:hover {
border: solid 1px #bd081c;
background-color: #bd081c;
}

/* はてブ枠線 */
.my_hatena2 {
border: solid 1px #1ba5dc;
color: #1ba5dc;
}
/* はてブマウスホバー時 */
.my_hatena2:hover {
border: solid 1px #1ba5dc;
background-color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena2 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket枠線 */
.my_pocket2 {
border: solid 1px #ef3f56;
color: #ef3f56;
}
/* Pocketマウスホバー時 */
.my_pocket2:hover {
border: solid 1px #ef3f56;
background-color: #ef3f56;
}

/* Feedly枠線 */
.my_feedly2 {
border: solid 1px #6cc655;
color: #6cc655;
}
/* Feedlyマウスホバー時 */
.my_feedly2:hover {
border: solid 1px #6cc655;
background-color: #6cc655;
}

/* 楽天ROOM枠線 */
.my_rakutenroom2 {
border: solid 1px #c61d79;
color: #c61d79;
}
/* 楽天ROOMマウスホバー時 */
.my_rakutenroom2:hover {
border: solid 1px #c61d79;
background-color: #c61d79;
}

/* リンクドイン枠線 */
.my_linkedin2 {
border: solid 1px #0a66c2;
color: #0a66c2;
}
/* リンクドインマウスホバー時 */
.my_linkedin2:hover {
border: solid 1px #0a66c2;
background-color: #0a66c2;
}

/* ディスコード枠線 */
.my_discord2 {
border: solid 1px #7289da;
color: #7289da;
}
/* ディスコードマウスホバー時 */
.my_discord2:hover {
border: solid 1px #7289da;
background-color: #7289da;
}

/* Podcast枠線 */
.my_podcast2 {
border: solid 1px #813BF2;
color: #813BF2;
}
/* Podcastマウスホバー時 */
.my_podcast2:hover {
border: solid 1px #813BF2;
background-color: #813BF2;
}

.flowbtn4でボタンカラーの#fff;指定を削除。
/* マウスホバー時*/の挙動を変更しています。
そのほか調整する場合は/* コメント */を参考にしてください。

⑦統一色バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑥枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。

/* ボタン全体 */
.flowbtn4 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  font-size: 35px;
  border-radius: 13px;
  transition: .5s;
  text-decoration: none;
  margin-bottom:10px;

  color: #fff;/* アイコンカラー */
  background-color: #000;/* 背景カラー */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn4:hover {
  text-decoration: none;
  cursor: pointer;

  color: #000;/* アイコンカラー */
  border: solid 1px #000;/* 枠線カラー */
  background-color: #fff;/* 背景カラー */
}

.flowbtn4のbackground-color:#000;
.flowbtn4:hoverの
color:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。

⑧統一色の枠線バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑥枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。

/* ボタン全体 */
.flowbtn4 {
font-family: 'Noto Sans Japaneses', sans-serif; 
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;
border-radius: 13px;
transition: .5s;
text-decoration: none;
margin-bottom:10px;

color: #000;/* アイコンカラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn4:hover {
text-decoration: none;
cursor: pointer;
color: #fff;

border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}

.flowbtn4のcolor: #000;
.flowbtn4:hoverの
border: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。

⑨丸いアプリ風ボタン

/* ボタン全体 */
.flowbtn〇〇 {
font-family: 'Noto Sans Japaneses', sans-serif; 
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;

border-radius: 50%;/* ここを変更する */

transition: .5s;
text-decoration: none;
color: #fff;
margin-bottom:10px;
}

/* 45px→40pxに変更 */
 .flowbtn〇〇 i.fa-brands.fa-instagram{
    font-size: 40px;
}

目次番号⑤〜⑧.flowbtnのborder-radiusを50%に変更、インスタアイコンは40pxくらいにするとバランスが良いかと思います。
2行目と19行目の〇〇番号は、一番上の塗りつぶしカラーなら「3」、それ以外のデザインは「4」を入れてください。

⑩フォント付き丸いカラーボタン

コードを表示する
<ul class="snsbtniti">

<li>
<a href="エックスのプロフィールURL" class="flowbtn5 my_x1">
<i class="fa-brands fa-x-twitter"></i>
<div>エックス</div>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn5 my_instagram1">
<i class="fa-brands fa-instagram"></i>
<div>Instagram</div>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn5 my_facebook1">
<i class="fa-brands fa-facebook-f"></i>
<div>Facebook</div>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn5 my_youtube1">
<i class="fab fa-youtube"></i>
<div>YouTube</div>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn5 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
<div>TikTok</div>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn5 my_amazon1">
<i class="fa-brands fa-amazon"></i>
<div>ほしいモノ</div>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn5 my_line1">
<i class="fa-brands fa-line"></i>
<div>LINE＠</div>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn5 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
<div>Pinterest</div>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn5 my_hatena1">
<i class="fa-solid fa-b"></i>
<div>Hatena</div>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn5 my_pocket1">
<i class="fab fa-get-pocket"></i>
<div>Pocket</div>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn5 my_feedly1">
<i class="fa-solid fa-rss"></i>
<div>Feedly</div>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn5 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
<div>楽天ROOM</div>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn5 my_linkedin1">
<i class="fa-brands fa-linkedin-in"></i>
<div>LinkedIn</div>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn5 my_discord1">
<i class="fa-brands fa-discord"></i>
<div>Discord</div>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn5 my_podcast1">
<i class="fa-solid fa-podcast"></i>
<div>Podcast</div>
</a>
</li>

</ul>

flowbtnを5に変更しています。

/* ボタン全体の外枠指定 */
.snsbtniti {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
flex: 0 0 33%; /* ボタンを3つ並びへ */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn5 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 70px;/* 背景横幅 */
height: 70px; /* 背景高さ */
font-size: 30px;
border-radius: 50%;/* ボタンを丸く指定 */
transition: .5s;
text-decoration: none;
color: #fff;
margin-bottom:10px;/* ボタン下の余白 */
}

/* ボタン内テキスト調整 */
.flowbtn5 div {
font-size: 11px;
font-weight: bold;
letter-spacing: 0;
position: relative;
bottom: 6px;
}

/* マウスホバー時少し浮き上がる */
.flowbtn5:hover {
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration: none;
cursor: pointer;
}

/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn5 i.fa-brands.fa-instagram,.flowbtn5 i.fa-brands.fa-amazon {
font-size: 35px;
}

/* エックス背景 */
.my_x1 {
background: #000;
}

/* Instagram紫グラデ背景 */
.my_instagram1 {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook背景 */
.my_facebook1 {
background: #1877f2;
}

/* YouTube背景 */
.my_youtube1 {
background: #da1725;
}

/* TikTok背景 */
.my_tiktok1 {
background: #000;
}

/* Amazon背景 */
.my_amazon1 {
background: #ff9900;
}

/* LINE背景 */
.my_line1 {
background: #00b900;
}

/* ピンタレスト背景 */
.my_pinterest1 {
background: #bd081c;
}

/* はてブ背景 */
.my_hatena1 {
background: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena1 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket背景 */
.my_pocket1 {
background: #ef3f56;
}

/* Feedly背景 */
.my_feedly1 {
background: #6cc655;
}

/* 楽天ROOM背景 */
.my_rakutenroom1 {
background: #c61d79;
}

/* リンクドイン背景 */
.my_linkedin1 {
background: #0a66c2;
}

/* ディスコード背景 */
.my_discord1 {
background: #7289da;
}

/* Podcast背景 */
.my_podcast1 {
background: #813BF2;
}

.flowbtn5と.flowbtn5 divをところどころ微調整しました。
その他は①四角いカラーボタンと同じです。

⑪枠線バージョン

コードを表示する
<ul class="snsbtniti">

<li>
<a href="エックスのプロフィールURL" class="flowbtn6 my_x2">
<i class="fa-brands fa-x-twitter"></i>
<div>エックス</div>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn6 my_instagram2">
<i class="fa-brands fa-instagram"></i>
<div>Instagram</div>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn6 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
<div>Facebook</div>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn6 my_youtube2">
<i class="fab fa-youtube"></i>
<div>YouTube</div>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn6 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
<div>TikTok</div>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn6 my_amazon2">
<i class="fa-brands fa-amazon"></i>
<div>ほしいモノ</div>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn6 my_line2">
<i class="fa-brands fa-line"></i>
<div>LINE＠</div>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn6 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
<div>Pinterest</div>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn6 my_hatena2">
<i class="fa-solid fa-b"></i>
<div>Hatena</div>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn6 my_pocket2">
<i class="fab fa-get-pocket"></i>
<div>Pocket</div>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn6 my_feedly2">
<i class="fa-solid fa-rss"></i>
<div>Feedly</div>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn6 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
<div>楽天ROOM</div>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn6 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
<div>LinkedIn</div>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn6 my_discord2">
<i class="fa-brands fa-discord"></i>
<div>Discord</div>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn6 my_podcast2">
<i class="fa-solid fa-podcast"></i>
<div>Podcast</div>
</a>
</li>

</ul>

flowbtnを6、my_〇〇を2に変更しています。

/* ボタン全体の外枠指定 */
.snsbtniti {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
flex: 0 0 33%; /* ボタンを3つ並びへ */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn6 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 70px;/* 背景横幅 */
height: 70px; /* 背景高さ */
font-size: 30px;
border-radius: 50%;/* ボタンを丸く指定 */
transition: .5s;
text-decoration: none;
margin-bottom:10px;/* ボタン下の余白 */
}

/* ボタン内テキスト調整 */
.flowbtn6 div {
font-size: 11px;
font-weight: bold;
letter-spacing: 0;
position: relative;
bottom: 7px;
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn6:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
}

/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn6 i.fa-brands.fa-instagram,.flowbtn6 i.fa-brands.fa-amazon {
font-size: 35px;
}

/* エックス枠線 */
.my_x2 {
border: solid 1px #000;
color: #000;
}
/* エックスマウスホバー時 */
.my_x2:hover{
border: solid 1px #000;
background-color: #000;
}

/* Instagram枠線 */
.my_instagram2{
border:solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.my_instagram2:hover {
border: solid 1px #c6529a;
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}


/* Facebook枠線 */
.my_facebook2 {
border: solid 1px #1877f2;
color: #1877f2;
}
/* Facebookマウスホバー時 */
.my_facebook2:hover {
border: solid 1px #1877f2;
background-color: #1877f2;
}

/* YouTube枠線 */
.my_youtube2 {
border: solid 1px #da1725;
color: #da1725;
}
/* YouTubeマウスホバー時 */
.my_youtube2:hover {
border: solid 1px #da1725;
background-color: #da1725;
}

/* TikTok枠線 */
.my_tiktok2 {
border: solid 1px #000;
color: #000;
}
/* TikTokマウスホバー時 */
.my_tiktok2:hover {
border: solid 1px #000;
background-color: #000;
}

/* Amazon枠線 */
.my_amazon2 {
border: solid 1px #ff9900;
color: #ff9900;
}
/* Amazonマウスホバー時 */
.my_amazon2:hover {
border: solid 1px #ff9900;
background-color: #ff9900;
}

/* LINE枠線 */
.my_line2 {
border: solid 1px #00b900;
color: #00b900;
}
/* LINEマウスホバー時 */
.my_line2:hover {
border: solid 1px #00b900;
background-color: #00b900;
}

/* ピンタレスト枠線 */
.my_pinterest2 {
border: solid 1px #bd081c;
color: #bd081c;
}
/* ピンタレストマウスホバー時 */
.my_pinterest2:hover {
border: solid 1px #bd081c;
background-color: #bd081c;
}

/* はてブ枠線 */
.my_hatena2 {
border: solid 1px #1ba5dc;
color: #1ba5dc;
}
/* はてブマウスホバー時 */
.my_hatena2:hover {
border: solid 1px #1ba5dc;
background-color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena2 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket枠線 */
.my_pocket2 {
border: solid 1px #ef3f56;
color: #ef3f56;
}
/* Pocketマウスホバー時 */
.my_pocket2:hover {
border: solid 1px #ef3f56;
background-color: #ef3f56;
}

/* Feedly枠線 */
.my_feedly2 {
border: solid 1px #6cc655;
color: #6cc655;
}
/* Feedlyマウスホバー時 */
.my_feedly2:hover {
border: solid 1px #6cc655;
background-color: #6cc655;
}

/* 楽天ROOM枠線 */
.my_rakutenroom2 {
border: solid 1px #c61d79;
color: #c61d79;
}
/* 楽天ROOMマウスホバー時 */
.my_rakutenroom2:hover {
border: solid 1px #c61d79;
background-color: #c61d79;
}

/* リンクドイン枠線 */
.my_linkedin2 {
border: solid 1px #0a66c2;
color: #0a66c2;
}
/* リンクドインマウスホバー時 */
.my_linkedin2:hover {
border: solid 1px #0a66c2;
background-color: #0a66c2;
}

/* ディスコード枠線 */
.my_discord2 {
border: solid 1px #7289da;
color: #7289da;
}
/* ディスコードマウスホバー時 */
.my_discord2:hover {
border: solid 1px #7289da;
background-color: #7289da;
}

/* Podcast枠線 */
.my_podcast2 {
border: solid 1px #813BF2;
color: #813BF2;
}
/* Podcastマウスホバー時 */
.my_podcast2:hover {
border: solid 1px #813BF2;
background-color: #813BF2;
}

.flowbtn6でボタンカラーの#fff;指定を削除。
/* マウスホバー時*/の挙動を変更しています。
そのほか調整する場合は/* コメント */を参考にしてください。

⑫統一色バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑪枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。

/* ボタン全体 */
.flowbtn6 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  font-size: 30px;
  border-radius: 50%;
  transition: .5s;
  text-decoration: none;
  margin-bottom:10px;

  color: #fff;/* ボタン内カラー */
  background-color: #000;/* 背景カラー */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn6:hover {
  text-decoration: none;
  cursor: pointer;

  color: #000;/* アイコンカラー */
  border: solid 1px #000;/* 枠線カラー */
  background-color: #fff;/* 背景カラー */
}

.flowbtn6のbackground-color:#000;
.flowbtn6:hoverの
color:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。

⑬統一色の枠線バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑪枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。

/* ボタン全体 */
.flowbtn6 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  font-size: 30px;
  border-radius: 50%;
  transition: .5s;
  text-decoration: none;
  margin-bottom:10px;
  
  color: #000!important;/* ボタン内カラー */
  background-color: #fff;/* ここは白で固定 */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn6:hover {
  text-decoration: none;
  cursor: pointer;
  color: #fff!important;

  border: solid 1px #000;/* 枠線カラー */
  background-color: #000;/* 背景カラー */
}

.flowbtn6のcolor: #000!important;
.flowbtn6:hoverの
border: solid 1px #000;
background-color: #000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。

⑭ボタン下フォントのカラーボタン

  • エックス
  • Instagram
  • Facebook
  • YouTube
  • TikTok
  • ほしいモノ
  • LINE＠
  • Pinterest
  • Hatena
  • Pocket
  • Feedly
  • 楽天ROOM
  • LinkedIn
  • Discord
  • Podcast
コードを表示する
<ul class="snsbtniti2">

<li>
<a href="エックスのプロフィールURL" class="flowbtn7 my_x1">
<i class="fa-brands fa-x-twitter"></i>
</a>
<div>エックス</div>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn7 my_instagram1">
<i class="fa-brands fa-instagram"></i>
</a>
<div>Instagram</div>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn7 my_facebook1">
<i class="fa-brands fa-facebook-f"></i>
</a>
<div>Facebook</div>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn7 my_youtube1">
<i class="fab fa-youtube"></i>
</a>
<div>YouTube</div>
</li>

<li>
<a href="TikTokプロフィールURL" class="flowbtn7 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
</a>
<div>TikTok</div>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn7 my_amazon1">
<i class="fa-brands fa-amazon"></i>
</a>
<div>ほしいモノ</div>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn7 my_line1">
<i class="fa-brands fa-line"></i>
</a>
<div>LINE＠</div>
</li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn7 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
</a>
<div>Pinterest</div>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn7 my_hatena1">
<i class="fa-solid fa-b"></i>
</a>
<div>Hatena</div>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn7 my_pocket1">
<i class="fab fa-get-pocket"></i>
</a>
<div>Pocket</div>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn7 my_feedly1">
<i class="fa-solid fa-rss"></i>
</a>
<div>Feedly</div>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn7 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
</a>
<div>楽天ROOM</div>
</li>

<li>
<a href="リンクドインURL" class="flowbtn7 my_linkedin1">
<i class="fa-brands fa-linkedin-in"></i>
</a>
<div>LinkedIn</div>
</li>

<li>
<a href="DiscordのURL" class="flowbtn7 my_discord1">
<i class="fa-brands fa-discord"></i>
</a>
<div>Discord</div>
</li>

<li>
<a href="PodcastのURL" class="flowbtn7 my_podcast1">
<i class="fa-solid fa-podcast"></i>
</a>
<div>Podcast</div>
</li>

</ul>

snsbtnitiを2、flowbtnを7に変更しています。
またdivタグをaタグの下に設置することで、ボタンと別で調整できるようにしました。

/* ボタン全体の外枠指定 */
.snsbtniti2 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti2 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti2 li {
flex: 0 0 33%;/* ボタンを3つ並びへ */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn7 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 60px;/* 背景横幅 */
height: 60px; /* 背景高さ */
font-size: 35px;
border-radius: 13px;/* ボタンの角を丸く */
transition: .5s;
text-decoration: none;
color: #fff;/* アイコンカラー */
}

/* アイコンの位置を真ん中へ */
.flowbtn7 i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* Amazon・楽天アイコンを少し大きく */
.flowbtn7 i.fa-brands.fa-amazon,.flowbtn7 .fa-regular.fa-registered {
font-size: 40px;
}
/*インスタアイコンを少し大きく */
.flowbtn7 i.fa-brands.fa-instagram{
font-size: 45px;
}

/* ボタン下テキスト調整 */
.snsbtniti2 div {
color: #222;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
position: relative;
bottom: 5px;
white-space: nowrap;/* 改行させない */
}

/* マウスホバー時、少し浮き上がる */
.flowbtn7:hover {
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration: none;
cursor: pointer;
}

/* エックス背景 */
.my_x1 {
background: #000;
}

/* Instagram背景 */
.my_instagram1 {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook背景 */
.my_facebook1 {
background: #1877f2;
}

/* YouTube背景 */
.my_youtube1 {
background: #da1725;
}

/* TikTok背景 */
.my_tiktok1 {
background: #000;
}

/* Amazon背景 */
.my_amazon1 {
background: #ff9900;
}

/* LINE背景 */
.my_line1 {
background: #00b900;
}

/* ピンタレスト背景 */
.my_pinterest1 {
background: #bd081c;
}

/* はてブ背景 */
.my_hatena1 {
background: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena1 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket背景 */
.my_pocket1 {
background: #ef3f56;
}

/* Feedly背景 */
.my_feedly1 {
background: #6cc655;
}

/* 楽天ROOM背景 */
.my_rakutenroom1 {
background: #c61d79;
}

/* リンクドイン背景 */
.my_linkedin1 {
background: #0a66c2;
}

/* ディスコード背景 */
.my_discord1 {
background: #7289da;
}

/* Podcast背景 */
.my_podcast1 {
background: #813BF2;
}

インスタ・Amazon・楽天のアイコンサイズを少し大きくしています。
そのほかアイコンが真ん中にくるように指定しました。

⑮枠線バージョン

  • エックス
  • Instagram
  • Facebook
  • YouTube
  • TikTok
  • ほしいモノ
  • LINE＠
  • Pinterest
  • Hatena
  • Pocket
  • Feedly
  • 楽天ROOM
  • LinkedIn
  • Discord
  • Podcast
コードを表示する
<ul class="snsbtniti2">

<li>
<a class="flowbtn8 my_x2">
<i class="fa-brands fa-x-twitter"></i>
</a>
<div>エックス</div>
</li>

<li>
<a class="flowbtn8 my_instagram2">
<i class="fa-brands fa-instagram"></i>
</a>
<div>Instagram</div>
</li>

<li>
<a class="flowbtn8 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
</a>
<div>Facebook</div>
</li>

<li>
<a class="flowbtn8 my_youtube2">
<i class="fab fa-youtube"></i>
</a>
<div>YouTube</div>
</li>

<li><a class="flowbtn8 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
</a>
<div>TikTok</div>
</li>

<li>
<a class="flowbtn8 my_amazon2">
<i class="fa-brands fa-amazon"></i>
</a>
<div>ほしいモノ</div>
</li>

<li>
<a class="flowbtn8 my_line2">
<i class="fa-brands fa-line"></i>
</a>
<div>LINE＠</div>
</li>

<li>
<a class="flowbtn8 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
</a>
<div>Pinterest</div>
</li>

<li>
<a class="flowbtn8 my_hatena2">
<i class="fa-solid fa-b"></i>
</a>
<div>Hatena</div>
</li>

<li>
<a class="flowbtn8 my_pocket2">
<i class="fab fa-get-pocket"></i>
</a>
<div>Pocket</div>
</li>

<li>
<a class="flowbtn8 my_feedly2">
<i class="fa-solid fa-rss"></i>
</a>
<div>Feedly</div>
</li>

<li>
<a class="flowbtn8 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
</a>
<div>楽天ROOM</div>
</li>

<li>
<a class="flowbtn8 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
</a>
<div>LinkedIn</div>
</li>

<li>
<a class="flowbtn8 my_discord2">
<i class="fa-brands fa-discord"></i>
</a>
<div>Discord</div>
</li>

<li>
<a class="flowbtn8 my_podcast2">
<i class="fa-solid fa-podcast"></i>
</a>
<div>Podcast</div>
</li>

</ul>

snsbtnitiを2,flowbtnを8,my_〇〇を2に変更しています。

/* ボタン全体の外枠指定 */
.snsbtniti2 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti2 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti2 li {
flex: 0 0 33%;/* ボタンを3つ並びへ */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn8 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 60px;/* 背景横幅 */
height: 60px; /* 背景高さ */
font-size: 35px;
border-radius: 13px;/* ボタンの角を丸く */
transition: .5s;
text-decoration: none;
}

/* アイコンの位置を真ん中へ */
.flowbtn8 i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* Amazon・楽天アイコンを少し大きく */
.flowbtn8 i.fa-brands.fa-amazon,.flowbtn8 .fa-regular.fa-registered {
font-size: 40px;
}
/*インスタアイコンを少し大きく */
.flowbtn8 i.fa-brands.fa-instagram{
font-size: 45px;
}

/* ボタン下テキスト調整 */
.snsbtniti2 div {
color: #222;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
position: relative;
bottom: 5px;
white-space: nowrap;/* 改行させない */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn8:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
}

/*インスタアイコンを少し大きく */
.flowbtn5 i.fa-brands.fa-instagram{
font-size: 45px;
}

/* エックス枠線 */
.my_x2 {
border: solid 1px #000;
color: #000;
}
/* エックスマウスホバー時 */
.my_x2:hover{
border: solid 1px #000;
background-color: #000;
}

/* Instagram枠線 */
.my_instagram2{
border:solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.my_instagram2:hover {
border: solid 1px #c6529a;
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/*Facebook・Amazon・楽天アイコンを少し大きく */
.flowbtn5 i.fa-brands.fa-amazon,.flowbtn5 i.fa-brands.fa-facebook,.flowbtn5 .fa-regular.fa-registered {
font-size: 40px;
}

/* Facebook枠線 */
.my_facebook2 {
border: solid 1px #1877f2;
color: #1877f2;
}
/* Facebookマウスホバー時 */
.my_facebook2:hover {
border: solid 1px #1877f2;
background-color: #1877f2;
}

/* YouTube枠線 */
.my_youtube2 {
border: solid 1px #da1725;
color: #da1725;
}
/* YouTubeマウスホバー時 */
.my_youtube2:hover {
border: solid 1px #da1725;
background-color: #da1725;
}

/* TikTok枠線 */
.my_tiktok2 {
border: solid 1px #000;
color: #000;
}
/* TikTokマウスホバー時 */
.my_tiktok2:hover {
border: solid 1px #000;
background-color: #000;
}

/* Amazon枠線 */
.my_amazon2 {
border: solid 1px #ff9900;
color: #ff9900;
}
/* Amazonマウスホバー時 */
.my_amazon2:hover {
border: solid 1px #ff9900;
background-color: #ff9900;
}

/* LINE枠線 */
.my_line2 {
border: solid 1px #00b900;
color: #00b900;
}
/* LINEマウスホバー時 */
.my_line2:hover {
border: solid 1px #00b900;
background-color: #00b900;
}

/* ピンタレスト枠線 */
.my_pinterest2 {
border: solid 1px #bd081c;
color: #bd081c;
}
/* ピンタレストマウスホバー時 */
.my_pinterest2:hover {
border: solid 1px #bd081c;
background-color: #bd081c;
}

/* はてブ枠線 */
.my_hatena2 {
border: solid 1px #1ba5dc;
color: #1ba5dc;
}
/* はてブマウスホバー時 */
.my_hatena2:hover {
border: solid 1px #1ba5dc;
background-color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena2 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket枠線 */
.my_pocket2 {
border: solid 1px #ef3f56;
color: #ef3f56;
}
/* Pocketマウスホバー時 */
.my_pocket2:hover {
border: solid 1px #ef3f56;
background-color: #ef3f56;
}

/* Feedly枠線 */
.my_feedly2 {
border: solid 1px #6cc655;
color: #6cc655;
}
/* Feedlyマウスホバー時 */
.my_feedly2:hover {
border: solid 1px #6cc655;
background-color: #6cc655;
}

/* 楽天ROOM枠線 */
.my_rakutenroom2 {
border: solid 1px #c61d79;
color: #c61d79;
}
/* 楽天ROOMマウスホバー時 */
.my_rakutenroom2:hover {
border: solid 1px #c61d79;
background-color: #c61d79;
}

/* リンクドイン枠線 */
.my_linkedin2 {
border: solid 1px #0a66c2;
color: #0a66c2;
}
/* リンクドインマウスホバー時 */
.my_linkedin2:hover {
border: solid 1px #0a66c2;
background-color: #0a66c2;
}

/* ディスコード枠線 */
.my_discord2 {
border: solid 1px #7289da;
color: #7289da;
}
/* ディスコードマウスホバー時 */
.my_discord2:hover {
border: solid 1px #7289da;
background-color: #7289da;
}

/* Podcast枠線 */
.my_podcast2 {
border: solid 1px #813BF2;
color: #813BF2;
}
/* Podcastマウスホバー時 */
.my_podcast2:hover {
border: solid 1px #813BF2;
background-color: #813BF2;
}

.flowbtn8でボタンカラーの#fff;指定を削除。
/* マウスホバー時*/の挙動を変更しています。
そのほか調整する場合は/* コメント */を参考にしてください。

⑯統一色バージョン

  • エックス
  • Instagram
  • Facebook
  • YouTube
  • TikTok
  • ほしいモノ
  • LINE＠
  • Pinterest
  • Hatena
  • Pocket
  • Feedly
  • 楽天ROOM
  • LinkedIn
  • Discord
  • Podcast

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑮枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の13〜15行目、23〜25行目の6箇所を追記または変更してください。

/* ボタン全体 */
.flowbtn8 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  font-size: 35px;
  border-radius: 13px;
  transition: .5s;
  text-decoration: none;

  color: #fff!important;/* ボタン内カラー */
  background-color: #000;/* 背景カラー */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn8:hover {
  text-decoration: none;
  cursor: pointer;

  color: #000!important;/* アイコンカラー */
  border: solid 1px #000;/* 枠線カラー */
  background-color: #fff;/* 背景カラー */
}

.flowbtn8のbackground-color:#000;
.flowbtn8:hoverの
color:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。

⑰統一色の枠線バージョン

  • エックス
  • Instagram
  • Facebook
  • YouTube
  • TikTok
  • ほしいモノ
  • LINE＠
  • Pinterest
  • Hatena
  • Pocket
  • Feedly
  • 楽天ROOM
  • LinkedIn
  • Discord
  • Podcast

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑮枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の13〜15行目、24〜25行目の5箇所を追記してください。

/* ボタン全体 */
.flowbtn8 {
font-family: 'Noto Sans Japaneses', sans-serif; 
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;
border-radius: 13px;
transition: .5s;
text-decoration: none;

color: #000!important;/* アイコンカラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn8:hover {
text-decoration: none;
cursor: pointer;
color: #fff;

border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}

.flowbtn8のcolor: #000!important;
.flowbtn8:hoverの
border: solid 1px #000;
background-color: #000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。

⑱丸いボタン下フォント

  • Podcast
  • Instagram
  • Facebook
  • YouTube
  • LinkedIn
  • ほしいモノ
  • LINE＠
  • Pinterest
  • Hatena
  • Pocket
  • Feedly
  • 楽天ROOM
/* ボタン全体 */
  .flowbtn〇〇 {
    font-family: 'Noto Sans Japaneses', sans-serif;
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    font-size: 35px;

    border-radius: 50%;/* ここを50%に変更 */

    transition: .5s;
    text-decoration: none;
    color: #fff;
  }

/* 45px→40pxに変更 */
  .flowbtn〇〇 i.fa-brands.fa-instagram{
    font-size: 40px;
  }

目次番号⑭〜⑰.flowbtn8のborder-radiusを50%に変更、インスタアイコンは40pxくらいにするとバランスが良いかと思います。
2行目と18行目の〇〇番号は、一番上の塗りつぶしカラーなら「3」、それ以外のデザインは「4」を入れてください。

⑲アイコンのみボタン

こちらは、アイコンコードに直接色を指定しました。
小さくまとまるため、5列並べてもキレイに収まります。

コードを表示する
<ul class="snsbtniti3">

<li>
<a href="エックスのプロフィールURL" class="flowbtn9 my_x3">
<i class="fa-brands fa-square-x-twitter"></i>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn9 my_instagram3">
<i class="fa-brands fa-square-instagram"></i>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn9 my_facebook3">
<i class="fa-brands fa-square-facebook"></i>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn9 my_youtube3">
<i class="fa-brands fa-square-youtube"></i>
</a>
</li>

<li>
<a href="TikTokプロフィールURL" class="flowbtn9 my_tiktok3">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn9 my_amazon3">
<i class="fa-brands fa-amazon"></i>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn9 my_line3">
<i class="fa-brands fa-line"></i>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn9 my_pinterest3">
<i class="fa-brands fa-square-pinterest"></i>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn9 my_hatena3">
<i class="fa-solid fa-b"></i>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn9 my_pocket3">
<i class="fab fa-get-pocket"></i>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn9 my_feedly3">
<i class="fa-solid fa-square-rss"></i>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn9 my_rakutenroom3">
<i class="fa-solid fa-registered"></i>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn9 my_linkedin3">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn9 my_discord3">
<i class="fa-brands fa-discord"></i>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn9 my_podcast3">
<i class="fa-solid fa-podcast"></i>
</a>
</li>

</ul>

snsbtnitiを3,flowbtnを9,my_〇〇を3に変更しています。
そのほかいくつかのアイコンコードをスクエア型に変更しました。

/* ボタン全体の外枠指定 */
.snsbtniti3 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti3 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti3 li {
flex: 0 0 20%;/* ボタンを5つ並びへ */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn9 {
display: inline-block;
transition: .5s;
font-size:53px;
text-decoration: none;
}


/* マウスホバー時、少し浮き上がる */
.flowbtn9:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
text-decoration: none;
cursor: pointer;
}

/* LINEのアイコンを少し小さく */
.flowbtn9 .fa-line{
font-size:49px;
}

/* TikTok・はてブのアイコンを少し小さく */
.flowbtn9 .fa-tiktok,.flowbtn9 .fa-b{
font-size: 46px;
}

/* エックスカラー */
.my_x3 {
color: #000;
}

/* Instagram紫グラデカラー */
.my_instagram3 {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Facebookカラー */
.my_facebook3 {
color: #1877f2;
}

/* YouTubeカラー */
.my_youtube3 {
color: #da1725;
}

/* TikTokカラー */
.my_tiktok3 {
color: #000;
}

/* Amazonカラー */
.my_amazon3 {
color: #ff9900;
}

/* LINEカラー */
.my_line3 {
color: #00b900;
}

/* ピンタレストカラー */
.my_pinterest3 {
color: #bd081c;
}

/* はてブカラー */
.my_hatena3 {
color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena3 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocketカラー */
.my_pocket3 {
color: #ef3f56;
}

/* Feedlyカラー */
.my_feedly3 {
color: #6cc655;
}

/* 楽天ROOMカラー */
.my_rakutenroom3 {
color: #c61d79;
}

/* リンクドインカラー */
.my_linkedin3 {
color: #0a66c2;
}

/* ディスコードカラー */
.my_discord3 {
color: #7289da;
}

/* Podcastカラー */
.my_podcast3 {
color: #813BF2;
}

flex: 0 0 20%;で5つ並びにしています。
インスタ以外は、色の指定をbackground→colorに変更しました。
※.インスタはグラデーションのため、特殊な指定をしています。
TikTok・LINE・はてブのアイコンは少し小さくしています。

⑳アイコンのみ統一色バージョン

カラーコードを1ヶ所追加すれば、お好きな色を指定できます。
基本コードは⑲アイコンのみボタンと同じものを使ってください。
CSSの/* エックスカラー */より下のコードをは削除しましょう。
そして以下の8行目を追記してください。

/* ボタン全体 */
.flowbtn9 {
display: inline-block;
transition: .5s;
font-size:53px;
text-decoration: none;

color:#000;/* ここでお好きなカラーを指定 */
}

.flowbtn9のcolor:#000;
を好きなカラーに変更してみましょう。

㉑フォント付き左アイコン横長ボタン

サイドバーに設置することを想定しています。
スマホ閲覧も考慮すると2列以上は厳しいでしょう。

コードを表示する
<ul class="snsbtniti4">

<li>
<a href="エックスのプロフィールURL" class="flowbtn10 my_x1">
<i class="fa-brands fa-x-twitter"></i>
<span>エックス</span>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn10 my_instagram1">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn10 my_facebook1">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn10 my_youtube1">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn10 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
<span>TikTok</span>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn10 my_amazon1">
<i class="fa-brands fa-amazon"></i>
<span>ほしいモノ</span>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn10 my_line1">
<i class="fa-brands fa-line"></i>
<span>LINE＠</span>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn10 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
<span>Pinterest</span>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn10 my_hatena1">
<i class="fa-solid fa-b"></i>
<span>Hatena</span>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn10 my_pocket1">
<i class="fab fa-get-pocket"></i>
<span>Pocket</span>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn10 my_feedly1">
<i class="fa-solid fa-rss"></i>
<span>Feedly</span>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn10 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
<span>楽天ROOM</span>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn10 my_linkedin1">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn10 my_discord1">
<i class="fa-brands fa-discord"></i>
<span>Discord</span>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn10 my_podcast1">
<i class="fa-solid fa-podcast"></i>
<span>Podcast</span>
</a>
</li>

<li>
<a href="プロフィールURL" class="flowbtn10 my_profile1">
<i class="fa-solid fa-user"></i>
<span>プロフィール</span>
</a>
</li>

</ul>

snsbtnitiを4,flowbtnを10,divをspanタグに変更しています。
バランスが悪かったため、一番下にプロフィールアイコンを足しました。

/* ボタン全体の外枠指定 */
.snsbtniti4 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ボタンを配置する場所の最大幅を指定 */
margin:0 auto;/* ボタン全体を中央に寄せる */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti4 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti4 li {
flex: 0 0 48%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn10 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 98%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:25px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
color: #fff!important;/* ボタン内カラー */
transition: .5s;
text-decoration: none;
box-shadow: 0 1px 2px #999;
margin-bottom:5px;/* ボタン下の余白 */
}

/* アイコンとフォントの位置 */
.flowbtn10 i,.flowbtn10 span {
position:absolute;
top:50%;
left:18%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* フォント調整 */
.flowbtn10 span {
font-size: 16px;
font-weight: bold;
left:56%;/* フォントを少し右へ */
white-space: nowrap;/* 改行させない */
}
/* インスタグラムのフォントを少し右へ */
.flowbtn10.my_instagram1 span {
left: 58%;
}

/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn10 span {
font-size: 13px;/* フォントサイズ */
}
.flowbtn10 {
width:100%!important; /* ボタンの横幅を最大へ */
}}

/* ボタンマウスホバー時、少し白くなる */
.flowbtn10:hover{
opacity: 0.7;
text-decoration: none;
cursor: pointer;
}

/*インスタアイコンを少し大きく */
.flowbtn10 i.fa-brands.fa-instagram{
font-size: 30px;
}

/* エックス背景 */
.my_x1 {
background: #000;
}

/* Instagram紫グラデ背景 */
.my_instagram1 {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook背景 */
.my_facebook1 {
background: #1877f2;
}

/* YouTube背景 */
.my_youtube1 {
background: #da1725;
}

/* TikTok背景 */
.my_tiktok1 {
background: #000;
}

/* Amazon背景 */
.my_amazon1 {
background: #ff9900;
}

/* LINE背景 */
.my_line1 {
background: #00b900;
}

/* ピンタレスト背景 */
.my_pinterest1 {
background: #bd081c;
}

/* はてブ背景 */
.my_hatena1 {
background: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena1 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket背景 */
.my_pocket1 {
background: #ef3f56;
}

/* Feedly背景 */
.my_feedly1 {
background: #6cc655;
}

/* 楽天ROOM背景 */
.my_rakutenroom1 {
background: #c61d79;
}

/* リンクドイン背景 */
.my_linkedin1 {
background: #0a66c2;
}

/* ディスコード背景 */
.my_discord1 {
background: #7289da;
}

/* Podcast背景 */
.my_podcast1 {
background: #813BF2;
}

/* プロフィール背景 */
.my_profile1 {
background: #000;
}

これまでのボタンとは、調整方法が異なりますので、変更する場合は/* コメント */を参考にしてください。

㉒枠線バージョン

コードを表示する
<ul class="snsbtniti4">

<li>
<a href="エックスのプロフィールURL" class="flowbtn11 my_x2">
<i class="fa-brands fa-x-twitter"></i>
<span>エックス</span>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn11 my_instagram2">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn11 my_facebook2">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn11 my_youtube2">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn11 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
<span>TikTok</span>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn11 my_amazon2">
<i class="fa-brands fa-amazon"></i>
<span>ほしいモノ</span>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn11 my_line2">
<i class="fa-brands fa-line"></i>
<span>LINE＠</span>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn11 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
<span>Pinterest</span>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn11 my_hatena2">
<i class="fa-solid fa-b"></i>
<span>Hatena</span>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn11 my_pocket2">
<i class="fab fa-get-pocket"></i>
<span>Pocket</span>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn11 my_feedly2">
<i class="fa-solid fa-rss"></i>
<span>Feedly</span>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn11 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
<span>楽天ROOM</span>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn11 my_linkedin2">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn11 my_discord2">
<i class="fa-brands fa-discord"></i>
<span>Discord</span>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn11 my_podcast2">
<i class="fa-solid fa-podcast"></i>
<span>Podcast</span>
</a>
</li>

<li>
<a href="プロフィールURL" class="flowbtn11 my_profile2">
<i class="fa-solid fa-user"></i>
<span>プロフィール</span>
</a>
</li>

</ul>

snsbtnitiを4,flowbtnを11,my_〇〇を2に変更しています。

/* ボタン全体の外枠指定 */
.snsbtniti4 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ボタンを配置する場所の最大幅を指定 */
margin:0 auto;/* ボタン全体を中央に寄せる */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti4 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti4 li {
flex: 0 0 48%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn11 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 98%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:25px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
margin-bottom:5px;/* ボタン下の余白 */
}

/* アイコンとフォントの位置 */
.flowbtn11 i,.flowbtn11 span {
position:absolute;
top:50%;
left:18%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* フォント調整 */
.flowbtn11 span {
font-size: 16px;
font-weight: bold;
left:56%;/* フォントを少し右へ */
white-space: nowrap;/* 改行させない */
}
/* インスタグラムのフォントを少し右へ */
.flowbtn11.my_instagram2 span {
left: 58%;
}

/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn11 span {
font-size: 13px;/* フォントサイズ */
}
.flowbtn11 {
width:100%!important; /* ボタンの横幅を最大へ */
}}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn11:hover{
text-decoration: none;
cursor: pointer;
color: #fff;
}

/*インスタアイコンを少し大きく */
.flowbtn11 i.fa-brands.fa-instagram{
font-size: 30px;
}

/* エックス枠線 */
.my_x2 {
border: solid 1px #000;
color: #000;
}
/* エックスマウスホバー時 */
.my_x2:hover{
border: solid 1px #000;
background-color: #000;
}

/* Instagram枠線 */
.my_instagram2{
border:solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.my_instagram2:hover {
border: solid 1px #c6529a;
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook枠線 */
.my_facebook2 {
border: solid 1px #1877f2;
color: #1877f2;
}
/* Facebookマウスホバー時 */
.my_facebook2:hover {
border: solid 1px #1877f2;
background-color: #1877f2;
}

/* YouTube枠線 */
.my_youtube2 {
border: solid 1px #da1725;
color: #da1725;
}
/* YouTubeマウスホバー時 */
.my_youtube2:hover {
border: solid 1px #da1725;
background-color: #da1725;
}

/* TikTok枠線 */
.my_tiktok2 {
border: solid 1px #000;
color: #000;
}
/* TikTokマウスホバー時 */
.my_tiktok2:hover {
border: solid 1px #000;
background-color: #000;
}

/* Amazon枠線 */
.my_amazon2 {
border: solid 1px #ff9900;
color: #ff9900;
}
/* Amazonマウスホバー時 */
.my_amazon2:hover {
border: solid 1px #ff9900;
background-color: #ff9900;
}

/* LINE枠線 */
.my_line2 {
border: solid 1px #00b900;
color: #00b900;
}
/* LINEマウスホバー時 */
.my_line2:hover {
border: solid 1px #00b900;
background-color: #00b900;
}

/* ピンタレスト枠線 */
.my_pinterest2 {
border: solid 1px #bd081c;
color: #bd081c;
}
/* ピンタレストマウスホバー時 */
.my_pinterest2:hover {
border: solid 1px #bd081c;
background-color: #bd081c;
}

/* はてブ枠線 */
.my_hatena2 {
border: solid 1px #1ba5dc;
color: #1ba5dc;
}
/* はてブマウスホバー時 */
.my_hatena2:hover {
border: solid 1px #1ba5dc;
background-color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena2 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket枠線 */
.my_pocket2 {
border: solid 1px #ef3f56;
color: #ef3f56;
}
/* Pocketマウスホバー時 */
.my_pocket2:hover {
border: solid 1px #ef3f56;
background-color: #ef3f56;
}

/* Feedly枠線 */
.my_feedly2 {
border: solid 1px #6cc655;
color: #6cc655;
}
/* Feedlyマウスホバー時 */
.my_feedly2:hover {
border: solid 1px #6cc655;
background-color: #6cc655;
}

/* 楽天ROOM枠線 */
.my_rakutenroom2 {
border: solid 1px #c61d79;
color: #c61d79;
}
/* 楽天ROOMマウスホバー時 */
.my_rakutenroom2:hover {
border: solid 1px #c61d79;
background-color: #c61d79;
}

/* リンクドイン枠線 */
.my_linkedin2 {
border: solid 1px #0a66c2;
color: #0a66c2;
}
/* リンクドインマウスホバー時 */
.my_linkedin2:hover {
border: solid 1px #0a66c2;
background-color: #0a66c2;
}

/* ディスコード枠線 */
.my_discord2 {
border: solid 1px #7289da;
color: #7289da;
}
/* ディスコードマウスホバー時 */
.my_discord2:hover {
border: solid 1px #7289da;
background-color: #7289da;
}

/* Podcast枠線 */
.my_podcast2 {
border: solid 1px #813BF2;
color: #813BF2;
}
/* Podcastマウスホバー時 */
.my_podcast2:hover {
border: solid 1px #813BF2;
background-color: #813BF2;
}

/* プロフィール枠線 */
.my_profile2 {
border: solid 1px #000;
color: #000;
}
/* プロフィールマウスホバー時 */
.my_profile2:hover {
border: solid 1px #000;
background-color: #000;
}

.flowbtn11でボタンカラーの#fff;指定を削除。
/* マウスホバー時*/の挙動を変更しています。
そのほか調整する場合は/* コメント */を参考にしてください。

㉓統一色バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉒枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。

/* ボタン全体 */
.flowbtn11 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 98%;
  height: 50px;
  font-size: 25px;
  border-radius: 4px;
  transition: .5s;
  text-decoration: none;
  margin-bottom:5px;

  color: #fff!important;/* ボタン内カラー基本は白固定 */
  background-color: #000;/* 背景カラー */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn11:hover {
  text-decoration: none;
  cursor: pointer;

  color: #000!important;/* アイコンカラー */
  border: solid 1px #000;/* 枠線カラー */
  background-color: #fff;/* 背景カラー */
}

.flowbtn11のbackground-color:#000;
.flowbtn11:hoverの
color:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。

㉔統一色の枠線バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉒枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。

/* ボタン全体 */
.flowbtn11 {
font-family: 'Noto Sans Japaneses', sans-serif; 
position: relative;
display: inline-block;
width: 98%;
height: 50px;
font-size: 25px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:5px;

color: #000!important;/* ボタン内カラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn11:hover {
text-decoration: none;
cursor: pointer;
color: #fff!important;

border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}

.flowbtn11のcolor: #000;
.flowbtn11:hoverの
border: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。

㉕フォント付き中央アイコン横長ボタン

コードを表示する
<ul class="snsbtniti4">

<li>
<a href="エックスのプロフィールURL" class="flowbtn12 my_x1">
<i class="fa-brands fa-x-twitter"></i>
<span>エックス</span>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn12 my_instagram1">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn12 my_facebook1">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn12 my_youtube1">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn12 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
<span>TikTok</span>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn12 my_amazon1">
<i class="fa-brands fa-amazon"></i>
<span>ほしいモノ</span>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn12 my_line1">
<i class="fa-brands fa-line"></i>
<span>LINE＠</span>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn12 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
<span>Pinterest</span>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn12 my_hatena1">
<i class="fa-solid fa-b"></i>
<span>Hatena</span>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn12 my_pocket1">
<i class="fab fa-get-pocket"></i>
<span>Pocket</span>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn12 my_feedly1">
<i class="fa-solid fa-rss"></i>
<span>Feedly</span>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn12 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
<span>楽天ROOM</span>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn12 my_linkedin1">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn12 my_discord1">
<i class="fa-brands fa-discord"></i>
<span>Discord</span>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn12 my_podcast1">
<i class="fa-solid fa-podcast"></i>
<span>Podcast</span>
</a>
</li>

<li>
<a href="プロフィールURL" class="flowbtn12 my_profile1">
<i class="fa-solid fa-user"></i>
<span>プロフィール</span>
</a>
</li>

</ul>

snsbtnitiを4,flowbtnを12に変更しています。

/* ボタン全体の外枠指定 */
.snsbtniti4 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ボタンを配置する場所の最大幅を指定 */
margin:0 auto;/* ボタン全体を中央に寄せる */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti4 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti4 li {
flex: 0 0 48%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn12 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 98%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:25px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
color:#fff!important;
margin-bottom:5px;/* ボタン下の余白 */
}

/* アイコンとフォントの位置 */
.flowbtn12 i,.flowbtn12 span{
position:absolute;
top:33%;/* アイコン位置調整 */
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* フォント調整 */
.flowbtn12 span {
font-size: 14px;
font-weight: bold;
top:80%;/* フォント位置を下にする */
white-space: nowrap;
}

/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn12 span {
font-size: 13px;/* フォントサイズ */
}
.flowbtn12 {
width:100%!important; /* ボタンの横幅を最大へ */
}}

/* ボタンマウスホバー時、少し白くなる */
.flowbtn12:hover{
opacity: 0.7;
text-decoration: none;
cursor: pointer;
}

/*インスタアイコンを少し大きく、位置を少し下げる */
.flowbtn12 i.fa-brands.fa-instagram{
font-size: 30px;
bottom:5px;
}

/* エックス背景 */
.my_x1 {
background: #000;
}

/* Instagram紫グラデ背景 */
.my_instagram1 {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook背景 */
.my_facebook1 {
background: #1877f2;
}

/* YouTube背景 */
.my_youtube1 {
background: #da1725;
}

/* TikTok背景 */
.my_tiktok1 {
background: #000;
}

/* Amazon背景 */
.my_amazon1 {
background: #ff9900;
}

/* LINE背景 */
.my_line1 {
background: #00b900;
}

/* ピンタレスト背景 */
.my_pinterest1 {
background: #bd081c;
}

/* はてブ背景 */
.my_hatena1 {
background: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena1 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket背景 */
.my_pocket1 {
background: #ef3f56;
}

/* Feedly背景 */
.my_feedly1 {
background: #6cc655;
}

/* 楽天ROOM背景 */
.my_rakutenroom1 {
background: #c61d79;
}

/* リンクドイン背景 */
.my_linkedin1 {
background: #0a66c2;
}

/* ディスコード背景 */
.my_discord1 {
background: #7289da;
}

/* Podcast背景 */
.my_podcast1 {
background: #813BF2;
}

/* プロフィール背景 */
.my_profile1 {
background: #000;
}

インスタボタンのみ少し微調整しています。

㉖枠線バージョン

コードを表示する
<ul class="snsbtniti4">

<li>
<a href="エックスのプロフィールURL" class="flowbtn13 my_x2">
<i class="fa-brands fa-x-twitter"></i>
<span>エックス</span>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn13 my_instagram2">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn13 my_facebook2">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn13 my_youtube2">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn13 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
<span>TikTok</span>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn13 my_amazon2">
<i class="fa-brands fa-amazon"></i>
<span>ほしいモノ</span>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn13 my_line2">
<i class="fa-brands fa-line"></i>
<span>LINE＠</span>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn13 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
<span>Pinterest</span>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn13 my_hatena2">
<i class="fa-solid fa-b"></i>
<span>Hatena</span>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn13 my_pocket2">
<i class="fab fa-get-pocket"></i>
<span>Pocket</span>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn13 my_feedly2">
<i class="fa-solid fa-rss"></i>
<span>Feedly</span>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn13 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
<span>楽天ROOM</span>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn13 my_linkedin2">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn13 my_discord2">
<i class="fa-brands fa-discord"></i>
<span>Discord</span>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn13 my_podcast2">
<i class="fa-solid fa-podcast"></i>
<span>Podcast</span>
</a>
</li>

<li>
<a href="プロフィールURL" class="flowbtn13 my_profile2">
<i class="fa-solid fa-user"></i>
<span>プロフィール</span>
</a>
</li>

</ul>

snsbtnitiを4,flowbtnを13,my_〇〇を2に変更しています。

/* ボタン全体の外枠指定 */
.snsbtniti4 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ボタンを配置する場所の最大幅を指定 */
margin:0 auto;/* ボタン全体を中央に寄せる */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti4 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti4 li {
flex: 0 0 48%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn13 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 98%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:25px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
margin-bottom:5px;/* ボタン下の余白 */
}

/* アイコンとフォントの位置 */
.flowbtn13 i,.flowbtn13 span{
position:absolute;
top:33%;/* アイコン位置調整 */
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* フォント調整 */
.flowbtn13 span {
font-size: 14px;
font-weight: bold;
top:80%;/* フォント位置を下にする */
white-space: nowrap;
}

/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn13 span {
font-size: 13px;/* フォントサイズ */
}
.flowbtn13 {
width:100%!important; /* ボタンの横幅を最大へ */
}}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn13:hover{
text-decoration: none;
cursor: pointer;
color: #fff;
}

/*インスタアイコンを少し大きく */
.flowbtn13 i.fa-brands.fa-instagram{
font-size: 30px;
}

/* エックス枠線 */
.my_x2 {
border: solid 1px #000;
color: #000;
}
/* エックスマウスホバー時 */
.my_x2:hover{
border: solid 1px #000;
background-color: #000;
}

/* Instagram枠線 */
.my_instagram2{
border:solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.my_instagram2:hover {
border: solid 1px #c6529a;
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook枠線 */
.my_facebook2 {
border: solid 1px #1877f2;
color: #1877f2;
}
/* Facebookマウスホバー時 */
.my_facebook2:hover {
border: solid 1px #1877f2;
background-color: #1877f2;
}

/* YouTube枠線 */
.my_youtube2 {
border: solid 1px #da1725;
color: #da1725;
}
/* YouTubeマウスホバー時 */
.my_youtube2:hover {
border: solid 1px #da1725;
background-color: #da1725;
}

/* TikTok枠線 */
.my_tiktok2 {
border: solid 1px #000;
color: #000;
}
/* TikTokマウスホバー時 */
.my_tiktok2:hover {
border: solid 1px #000;
background-color: #000;
}

/* Amazon枠線 */
.my_amazon2 {
border: solid 1px #ff9900;
color: #ff9900;
}
/* Amazonマウスホバー時 */
.my_amazon2:hover {
border: solid 1px #ff9900;
background-color: #ff9900;
}

/* LINE枠線 */
.my_line2 {
border: solid 1px #00b900;
color: #00b900;
}
/* LINEマウスホバー時 */
.my_line2:hover {
border: solid 1px #00b900;
background-color: #00b900;
}
/* ピンタレスト枠線 */
.my_pinterest2 {
border: solid 1px #bd081c;
color: #bd081c;
}
/* ピンタレストマウスホバー時 */
.my_pinterest2:hover {
border: solid 1px #bd081c;
background-color: #bd081c;
}

/* はてブ枠線 */
.my_hatena2 {
border: solid 1px #1ba5dc;
color: #1ba5dc;
}
/* はてブマウスホバー時 */
.my_hatena2:hover {
border: solid 1px #1ba5dc;
background-color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena2 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket枠線 */
.my_pocket2 {
border: solid 1px #ef3f56;
color: #ef3f56;
}
/* Pocketマウスホバー時 */
.my_pocket2:hover {
border: solid 1px #ef3f56;
background-color: #ef3f56;
}

/* Feedly枠線 */
.my_feedly2 {
border: solid 1px #6cc655;
color: #6cc655;
}
/* Feedlyマウスホバー時 */
.my_feedly2:hover {
border: solid 1px #6cc655;
background-color: #6cc655;
}

/* 楽天ROOM枠線 */
.my_rakutenroom2 {
border: solid 1px #c61d79;
color: #c61d79;
}
/* 楽天ROOMマウスホバー時 */
.my_rakutenroom2:hover {
border: solid 1px #c61d79;
background-color: #c61d79;
}

/* リンクドイン枠線 */
.my_linkedin2 {
border: solid 1px #0a66c2;
color: #0a66c2;
}
/* リンクドインマウスホバー時 */
.my_linkedin2:hover {
border: solid 1px #0a66c2;
background-color: #0a66c2;
}

/* ディスコード枠線 */
.my_discord2 {
border: solid 1px #7289da;
color: #7289da;
}
/* ディスコードマウスホバー時 */
.my_discord2:hover {
border: solid 1px #7289da;
background-color: #7289da;
}

/* Podcast枠線 */
.my_podcast2 {
border: solid 1px #813BF2;
color: #813BF2;
}
/* Podcastマウスホバー時 */
.my_podcast2:hover {
border: solid 1px #813BF2;
background-color: #813BF2;
}

/* プロフィール枠線 */
.my_profile2 {
border: solid 1px #000;
color: #000;
}
/* プロフィールマウスホバー時 */
.my_profile2:hover {
border: solid 1px #000;
background-color: #000;
}

.flowbtn13でボタンカラーの#fff;指定を削除。
/* マウスホバー時*/の挙動を変更しています。
そのほか調整する場合は/* コメント */を参考にしてください。

㉗統一色バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉖枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。

/* ボタン全体 */
.flowbtn13 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 98%;
  height: 50px;
  font-size: 25px;
  border-radius: 4px;
  transition: .5s;
  text-decoration: none;
  margin-bottom:5px;

  color: #fff!important;/* ボタン内カラー基本は白固定 */
  background-color: #000;/* 背景カラー */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn13:hover {
  text-decoration: none;
  cursor: pointer;

  color: #000!important;/* アイコンカラー */
  border: solid 1px #000;/* 枠線カラー */
  background-color: #fff;/* 背景カラー */
}

.flowbtn13のbackground-color:#000;
.flowbtn13:hoverの
color:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。

㉘統一色の枠線バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉖枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。

/* ボタン全体 */
.flowbtn13 {
font-family: 'Noto Sans Japaneses', sans-serif; 
position: relative;
display: inline-block;
width: 98%;
height: 50px;
font-size: 25px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:5px;

color: #000!important;/* アイコンカラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn13:hover {
text-decoration: none;
cursor: pointer;
color: #fff!important;

border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}

.flowbtn13のcolor: #000;
.flowbtn13:hoverの
border: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。

㉙アイコンのみ横長ボタン

SNSシェアボタンスマホデザイン

最後はタイトル下や本文下のシェアボタンを想定して作りました。
スマホ閲覧も考慮すると5列くらいがちょうど良い気がします。

コードを表示する
<ul class="snsbtniti5">

<li>
<a href="エックスのプロフィールURL" class="flowbtn14 my_x1">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn14 my_instagram1">
<i class="fa-brands fa-instagram"></i>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn14 my_facebook1">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn14 my_youtube1">
<i class="fab fa-youtube"></i>
</a>
</li>

<li>
<a href="TikTokプロフィールURL" class="flowbtn14 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn14 my_amazon1">
<i class="fa-brands fa-amazon"></i>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn14 my_line1">
<i class="fa-brands fa-line"></i>

</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn14 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn14 my_hatena1">
<i class="fa-solid fa-b"></i>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn14 my_pocket1">
<i class="fab fa-get-pocket"></i>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn14 my_feedly1">
<i class="fa-solid fa-rss"></i>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn14 my_rakutenroom1">
<i class="fa-solid fa-registered"></i>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn14 my_linkedin1">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn14 my_discord1">
<i class="fa-brands fa-discord"></i>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn14 my_podcast1">
<i class="fa-solid fa-podcast"></i>
</a>
</li>

</ul>

snsbtnitiを5,flowbtnを14に変更しています。
フォントを指定していた<span>〇〇</span>タグを削除しました。

/* ボタン全体の外枠指定 */
.snsbtniti5 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti5 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti5 li {
flex: 0 0 19%;/* ボタンが5列に並ぶ指定 */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn14 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 100%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:33px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
color:#fff!important;
margin-bottom:5px;/* ボタン下の余白 */
}

/* アイコンとフォントの位置 */
.flowbtn14 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* マウスホバー時、少し白くなる */
.flowbtn14:hover{
opacity: 0.7;
text-decoration: none;
cursor: pointer;
}

/*InstagramとAmazonのアイコンを少し大きく */
.flowbtn14 i.fa-brands.fa-instagram,flowbtn14 i.fa-brands.fa-amazon{
font-size: 38px;
}

/* エックス背景 */
.my_x1 {
background: #000;
}

/* Instagram紫グラデ背景 */
.my_instagram1 {
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook背景 */
.my_facebook1 {
background: #1877f2;
}

/* YouTube背景 */
.my_youtube1 {
background: #da1725;
}

/* TikTok背景 */
.my_tiktok1 {
background: #000;
}

/* Amazon背景 */
.my_amazon1 {
background: #ff9900;
}

/* LINE背景 */
.my_line1 {
background: #00b900;
}

/* ピンタレスト背景 */
.my_pinterest1 {
background: #bd081c;
}

/* はてブ背景 */
.my_hatena1 {
background: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena1 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket背景 */
.my_pocket1 {
background: #ef3f56;
}

/* Feedly背景 */
.my_feedly1 {
background: #6cc655;
}

/* 楽天ROOM背景 */
.my_rakutenroom1 {
background: #c61d79;
}

/* リンクドイン背景 */
.my_linkedin1 {
background: #0a66c2;
}

/* ディスコード背景 */
.my_discord1 {
background: #7289da;
}

/* Podcast背景 */
.my_podcast1 {
background: #813BF2;
}

.snsbtniti5の横幅制限をなくしたので、設置場所の最大幅に自動調整されます。
flex: 0 0 19%;でボタンが5列に並ぶように指定しました。
そのほかInstagramとAmazonアイコンは少し大きくしています。

㉚枠線バージョン

コードを表示する
<ul class="snsbtniti5">

<li>
<a href="エックスのプロフィールURL" class="flowbtn15 my_x2">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn15 my_instagram2">
<i class="fa-brands fa-instagram"></i>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn15 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn15 my_youtube2">
<i class="fab fa-youtube"></i>
</a>
</li>

<li>
<a href="TikTokプロフィールURL" class="flowbtn15 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn15 my_amazon2">
<i class="fa-brands fa-amazon"></i>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン＠のアカウント" class="flowbtn15 my_line2">
<i class="fa-brands fa-line"></i>

</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn15 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn15 my_hatena2">
<i class="fa-solid fa-b"></i>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn15 my_pocket2">
<i class="fab fa-get-pocket"></i>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn15 my_feedly2">
<i class="fa-solid fa-rss"></i>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn15 my_rakutenroom2">
<i class="fa-solid fa-registered"></i>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn15 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn15 my_discord2">
<i class="fa-brands fa-discord"></i>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn15 my_podcast2">
<i class="fa-solid fa-podcast"></i>
</a>
</li>

</ul>

snsbtnitiを5,flowbtnを15,my_〇〇を2に変更しています。

/* ボタン全体の外枠指定 */
.snsbtniti5 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti5 {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti5 li {
flex: 0 0 19%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn15 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 100%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:33px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
margin-bottom:5px;/* ボタン下の余白 */
}

/* アイコンとフォントの位置 */
.flowbtn15 i{
position:absolute;
top:50%;/* アイコン位置調整 */
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}

/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn15 {
width:100%!important; /* ボタンの横幅を最大へ */
}}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn15:hover{
text-decoration: none;
cursor: pointer;
color: #fff;
}

/*InstagramとAmazonのアイコンを少し大きく */
.flowbtn15 i.fa-brands.fa-instagram,.flowbtn15 i.fa-brands.fa-amazon{
font-size: 38px;
}

/* エックス枠線 */
.my_x2 {
border: solid 1px #000;
color: #000;
}
/* エックスマウスホバー時 */
.my_x2:hover{
border: solid 1px #000;
background-color: #000;
}

/* Instagram枠線 */
.my_instagram2{
border:solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.my_instagram2:hover {
border: solid 1px #c6529a;
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook枠線 */
.my_facebook2 {
border: solid 1px #1877f2;
color: #1877f2;
}
/* Facebookマウスホバー時 */
.my_facebook2:hover {
border: solid 1px #1877f2;
background-color: #1877f2;
}

/* YouTube枠線 */
.my_youtube2 {
border: solid 1px #da1725;
color: #da1725;
}
/* YouTubeマウスホバー時 */
.my_youtube2:hover {
border: solid 1px #da1725;
background-color: #da1725;
}

/* TikTok枠線 */
.my_tiktok2 {
border: solid 1px #000;
color: #000;
}
/* TikTokマウスホバー時 */
.my_tiktok2:hover {
border: solid 1px #000;
background-color: #000;
}

/* Amazon枠線 */
.my_amazon2 {
border: solid 1px #ff9900;
color: #ff9900;
}
/* Amazonマウスホバー時 */
.my_amazon2:hover {
border: solid 1px #ff9900;
background-color: #ff9900;
}

/* LINE枠線 */
.my_line2 {
border: solid 1px #00b900;
color: #00b900;
}
/* LINEマウスホバー時 */
.my_line2:hover {
border: solid 1px #00b900;
background-color: #00b900;
}

/* ピンタレスト枠線 */
.my_pinterest2 {
border: solid 1px #bd081c;
color: #bd081c;
}
/* ピンタレストマウスホバー時 */
.my_pinterest2:hover {
border: solid 1px #bd081c;
background-color: #bd081c;
}

/* はてブ枠線 */
.my_hatena2 {
border: solid 1px #1ba5dc;
color: #1ba5dc;
}
/* はてブマウスホバー時 */
.my_hatena2:hover {
border: solid 1px #1ba5dc;
background-color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena2 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket枠線 */
.my_pocket2 {
border: solid 1px #ef3f56;
color: #ef3f56;
}
/* Pocketマウスホバー時 */
.my_pocket2:hover {
border: solid 1px #ef3f56;
background-color: #ef3f56;
}

/* Feedly枠線 */
.my_feedly2 {
border: solid 1px #6cc655;
color: #6cc655;
}
/* Feedlyマウスホバー時 */
.my_feedly2:hover {
border: solid 1px #6cc655;
background-color: #6cc655;
}

/* 楽天ROOM枠線 */
.my_rakutenroom2 {
border: solid 1px #c61d79;
color: #c61d79;
}
/* 楽天ROOMマウスホバー時 */
.my_rakutenroom2:hover {
border: solid 1px #c61d79;
background-color: #c61d79;
}

/* リンクドイン枠線 */
.my_linkedin2 {
border: solid 1px #0a66c2;
color: #0a66c2;
}
/* リンクドインマウスホバー時 */
.my_linkedin2:hover {
border: solid 1px #0a66c2;
background-color: #0a66c2;
}

/* ディスコード枠線 */
.my_discord2 {
border: solid 1px #7289da;
color: #7289da;
}
/* ディスコードマウスホバー時 */
.my_discord2:hover {
border: solid 1px #7289da;
background-color: #7289da;
}

/* Podcast枠線 */
.my_podcast2 {
border: solid 1px #813BF2;
color: #813BF2;
}
/* Podcastマウスホバー時 */
.my_podcast2:hover {
border: solid 1px #813BF2;
background-color: #813BF2;
}
/* プロフィール枠線 */
.my_profile2 {
border: solid 1px #000;
color: #000;
}
/* プロフィールマウスホバー時 */
.my_profile2:hover {
border: solid 1px #000;
background-color: #000;
}

.flowbtn15でボタンカラーの#fff;指定を削除。
/* マウスホバー時*/の挙動を変更しています。
そのほか調整する場合は/* コメント */を参考にしてください。

㉛統一色バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉚枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。

/* ボタン全体 */
.flowbtn15 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 100%;
  height: 50px;
  font-size: 33px;
  border-radius: 4px;
  transition: .5s;
  text-decoration: none;
  margin-bottom:5px;

  color: #fff!important;/* アイコンカラー */
  background-color: #000;/* 背景カラー */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn15:hover {
  text-decoration: none;
  cursor: pointer;

  color: #000!important;/* アイコンカラー */
  border: solid 1px #000;/* 枠線カラー */
  background-color: #fff;/* 背景カラー */
}

.flowbtn15のbackground-color:#000;
.flowbtn15:hoverの
color:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。

㉜統一色の枠線バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉚枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。

/* ボタン全体 */
.flowbtn15 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 100%;
  height: 50px;
  font-size: 33px;
  border-radius: 4px;
  transition: .5s;
  text-decoration: none;
  margin-bottom:5px;

  color: #000!important;/* アイコンカラー */
  background-color: #fff;/* ここは白で固定 */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn15:hover {
  text-decoration: none;
  cursor: pointer;
  color: #fff!important;

  border: solid 1px #000;/* 枠線カラー */
  background-color: #000;/* 背景カラー */
}

.flowbtn15のcolor: #000;
.flowbtn15:hoverの
border: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。

目次

よくある質問

ボタンの並ぶ数を変えたい

/* ボタン同士の余白調整 */
.snsbtniti li {
  flex: 0 0 33%;/* この数値を変える */
  text-align: center!important;
}

どのボタンにもflex:0 0 〇〇%;の指定がありますので、そこを変更してください。
設置場所の横幅を100％とし、ボタン同士の余白をどのくらいあけるか？の指定です。
例えば33％でボタン3つなら「33＋33＋33」となり、ちょうど3等分の余白を自動であけてくれます。

20%に変更すれば、5つ並びへ。

25%に変更すれば、4つ並びになります。

/* ボタン全体の外枠指定 */
.snsbtniti {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;

/* この2行を削除 */
  max-width:350px;
  margin:0 auto;
}

また設置場所の画面の幅に自動で合わせたければ、上記の2行を削除してください。

カゲオ

ただし、スマホから見た兼ね合いもあるため、必ずPCと合わせて確認してね。

スマホとパソコンで並ぶ数を変えたい

/* スマホの並び数 */
@media(max-width:500px) {
.snsbtniti li {
  flex: 0 0 25%;/* 4列指定 */
  text-align: center!important;
}
}

/* タブレット以上の並び数 */
@media(min-width:800px) {
.snsbtniti li {
  flex: 0 0 16%;/* 6列指定 */
  text-align: center!important;
}
}

flexをそれぞれに指定してあげれば変更できます。

ボタン同士の余白を調整したい

SNSボタン余白調整Before
Before
SNSボタン余白調整After
After
/* ボタン全体の位置調整 */
.snsbtniti {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  max-width:350px;/* ここを変更する */
  margin:0 auto;
 }

.snsbtnitiのmax-widthの値を小さくしてください。

ボタンの下に空のボックスができてしまう

SNSボタンデザイン４
.snsbtniti p {
display: none;
}

おそらく空のPタグが自動挿入されているので、上記コードを追記してみてください。
.snsbtnitiはボタンの種類によって、.snsbtnit2や.snsbtniti3になっているのため、そこだけ注意しましょう。

一部のCSSが効きません

Before
color: #fff;

After
color: #fff!important;

セミコロン「;」で指定いるところを優先「!important;」に変更してみてください。

CSSのコメントを一括で削除したい

CSSコンパクト化ツール

まずCSSをコンパクト化ツールでコメントを一括削除します。
削除したコードをコピーしてください。

CSS整形ツール

続いてCSS整形サイトを利用するとコメントを削除しつつ、見やすいコードに置き換えてくれます。

Font Awesomeのアイコンは商用利用できる？

はい、可能です。
→詳細は公式サイトをご確認ください。

結論：SNSアイコンボタンはコピペでさくっと作ろう

以上、SNSアイコンボタンの作例でした。
Font Awesomeは、2,000以上の無料アイコンがありますので、ご希望のものがなければ、応用して使ってください。

WordPress
シェアしていただけると励みになります
  • URLをコピーしました！

質問はこちらへ

コメント入力欄

※日本語が含まれない内容は投稿できません。

  1. HOME
  2. ブログスキル
  3. WordPress
  4. サンプル投稿
目次