HTMLとCSSで作る｜15種類のSNSアイコンボタン18選

<ul class="snsbtniti">

  <li>
  <a href="エックスのプロフィールURL" class="flowbtn my_x1">
  <i class="fa-brands fa-x-twitter"></i>
  <div>エックス</div>
  </a>
  </li>
  
  <li>
  <a href="インスタのプロフィールURL" class="flowbtn my_instagram1">
  <i class="fa-brands fa-instagram"></i>
  <div>Instagram</div>
  </a>
  </li>

</ul>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<ul class="snsbtniti">
    <li>
    <a class="flowbtn my_x1">
    <i class="fa-brands fa-x-twitter"></i>
    </a>
    <div>エックス</div>
    </li>
      ・
      ・
      ・

function enqueue_scripts(){
	wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v6.5.1/css/all.css');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

<ul class="snsbtniti">

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

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

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

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

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

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

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

  <li>
  <a href="ピンタレストプロフィールURL" class="flowbtn 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="flowbtn  my_hatena1">
  <i class="fa-solid fa-b"></i>
  <div>Hatena</div>
  </a>
  </li>

  <li>
  <a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn 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="flowbtn  my_feedly1">
  <i class="fa-solid fa-rss"></i>
  <div>Feedly</div>
  </a>
  </li>

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

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

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

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

</ul>

/* ボタン全体の外枠指定 */
.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;
}

/* ボタン全体 */
.flowbtn {
  font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
  position: relative;
  display: inline-block;
  width: 75px; /* 背景横幅 */
  height: 65px;/* 背景高さ */
  font-size: 30px;/* アイコンサイズ */
  border-radius: 4px;
  color: #fff!important;/* ボタン内カラー */
  transition: .5s;
  text-decoration: none;
  box-shadow: 0 1px 2px #999;
  margin-bottom:10px;/* ボタン下余白 */
}

/* アイコンの位置を少し下げる */
.flowbtn i {
  position: relative;
  top: 5px;
}

/* ボタン内テキスト調整 */
.flowbtn div {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
}

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

/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn i.fa-brands.fa-instagram,.flowbtn 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;
}

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

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

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

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

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

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

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

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