スポンサーリンク

CSSを使ってソーシャルボタンを作ってみた!

2019年9月23日HTML・CSS

今回はソーシャルボタンを作ってみましたのでご紹介します。

以前プラグインやソーシャルボタンが設置できるサービスを紹介しました。

プラグインやサービスを使えば簡単にいろいろなソーシャルボタンを設置することができますが、「読み込みが遅い」「ボタンのデザインのカスタマイズが出来ない」などのデメリットがあります。

CSSで作ったソーシャルボタンの方が読み込みが速く、カスタマイズしやすいというメリットがあります。
そこで今回はソーシャルボタンを作ってみました。

スポンサーリンク

はじめに

ソーシャルボタンにはアイコンフォント『FontAwesome 5』を使用します。アイコンフォントを導入してない方は『FontAwesome5』を導入してください。

はてな、LINE、Feedlyのアイコン

『FontAwesome』にははてな、LINE、Feedlyのアイコンがありません。はてな、LINE、Feedlyのアイコンは別のアイコンフォントサービスで提供されています。

上記のサービスを利用しなくても以下のもので代用できると思います。

はてな ➡︎ B! (「B」と「!」の文字)

LINE ➡︎ (FontAwesome)

Feedly ➡︎ (FontAwesome)

HTML

HTMLはすべて共通です

<ul class="social-btn">
     <li class="social-btn_twitter"><a href="#"><span class="fab fa-twitter"></span></a></li>
    <li class="social-btn_facebook"><a href="#"><span class="fab fa-facebook-f"></span></a></li>
    <li class="social-btn_google-p"><a href="#"><span class="fab fa-google-plus-g"></span></a></li>
    <li class="social-btn_hatena"><a href="#"><span class="icon-hatena1"></span></a></li>
    <li class="social-btn_pocket"><a  href="#"><span class="fab fa-get-pocket"></span></a></li>
    <li class="social-btn_line"><a  href="#"><spanclass="icon-line"></span></a></li>
    <li class="social-btn_feedly"><a  href="#"><span class="icon-feedly"></span></a></li>
    <li class="social-btn_rss"><a  href="#"><span class="fas fa-rss"></span></a></li>
</ul>

使わないSNSボタンは削除してください。

2020年11月8日

各SNSのアイコンを<i>~</i>を使っていましたが、表示されないときがあるため<span>~</span>に変更しました。

「はてな」「LINE」「Feedly」のアイコンは『IconMoon』でダウンロードしたものを使っています。代わりのものを使用する場合は以下のように書き変えてください。

はてな

5行目
<li class="social-btn_hatena"><a href="#">B!</a></li>

LINE

7行目
<li class="social-btn_line"><a href="#"><span class="fad fa-comment"></span></a></li>

Feedly

8行目
<li class="social-btn_feedly"><a href="#"><span class="fas fa-rss"></span></a></li>

「LINE」「Feedly」はアイコンではなく文字してもいいかと思います。

デザインのデモとサンプルCSS

カラー

1.横幅が可変するボタン

よく見かけるデザインのソーシャルボタンです。表示するソーシャルボタンの数によって各SNSボタンの横幅が変わります。


/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    display:flex;
    justify-content:flex-start;
    flex-wrap:wrap;
    width:100%;
    list-style:none;
}

.social-btn li {
    flex-grow:1;
    display:block;
    min-width:100px;
    height:40px;
    margin:2px;
    padding:0;
    line-height:40px;
    font-size:20px;
    text-align:center;
}

.social-btn a {
    color:#fff;
    text-decoration:none;
}

/*各SNSの背景色*/
.social-btn .social-btn_twitter {
    background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}

.social-btn .social-btn_facebook {
    background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}

.social-btn .social-btn_google-p {
    background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}

.social-btn .social-btn_hatena {
    font-size:16px;
    background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}

.social-btn .social-btn_pocket {
    background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}

.social-btn .social-btn_line {
    background-color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}

.social-btn .social-btn_feedly {
    background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}

.social-btn .social-btn_rss {
    background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}
2.横幅固定

上のデザインのボタンを横幅を固定させたものです。


/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    display:flex;
    flex-wrap:wrap;
    list-style:none;
}
 
.social-btn li {
    display:inline-block;
    width:100px;
    height:40px;
    margin:2px;
    padding:0;
    line-height:40px;
    font-size:20px;
    text-align:center;
}
 
.social-btn a {
    color:#fff;
    text-decoration:none;
}
 
/*各SNSの背景色*/
.social-btn .social-btn_twitter {
    background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook {
    background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p {
    background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena {
    font-size:16px;
    background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket {
    background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line {
    background-color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly {
    background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss {
    background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}
3.小さいボタン

/*-------------------------
 ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    list-style:none;
    text-align:center;
}
 
.social-btn li {
    display:inline-block;
    width:30px;
    height:30px;
    margin:2px;
    padding:0;
    line-height:30px;
    font-size:16px;
    text-align:center;
    border-radius:5px;
}
 
.social-btn a {
    color:#fff;
    text-decoration:none;
}
 
/*各SNSの背景色*/
.social-btn .social-btn_twitter {
    background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook {
    background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p {
    background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena {
    font-size:14px;
    background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket {
    background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line {
    background-color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly {
    background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss {
    background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}
4.小さいボタン(ステッチ風)

上の小さいボタンをステッチ風にしてみました。


/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    list-style:none;
    text-align:center;
}
 
.social-btn li {
    display:inline-block;
    width:30px;
    height:30px;
    margin:2px 5px;
    padding:0;
    line-height:30px;
    font-size:16px;
    text-align:center;
    border:1px solid #fff;
    border-radius:3px;
}
 
.social-btn a {
    color:#fff;
    text-decoration:none;
}
 
/*各SNSの設定*/
.social-btn .social-btn_twitter {
    box-shadow:0 0 0 3px #1da1f2;
    background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook {
    box-shadow:0 0 0 3px #3b5998;
    background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p {
    box-shadow:0 0 0 3px #dd4b39;
    background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena {
    font-size:14px;
    box-shadow:0 0 0 3px #008fde;
    background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket {
    box-shadow:0 0 0 3px #ef4056;
    background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line {
    box-shadow:0 0 0 3px #00c300;
    background-color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly {
    box-shadow:0 0 0 3px #2bb24c;
    background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss {
    box-shadow:0 0 0 3px #f26522;
    background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}
5.長方形(ステッチ風)

長方形のボタンをステッチ風にしてみました。


/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    display:flex;
    flex-wrap:wrap;
    list-style:none;
}
 
.social-btn li {
    display:inline-block;
    width:80px;
    height:25px;
    margin:5px;
    padding:0;
    line-height:25px;
    font-size:16px;
    text-align:center;
    border-top:1px dotted #fff;
    border-bottom:1px dotted #fff;
}
 
.social-btn a {
    color:#fff;
    text-decoration:none;
}
 
/*各SNSの設定*/
.social-btn .social-btn_twitter {
    box-shadow:0 0 0 3px #1da1f2;
    background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook {
    box-shadow:0 0 0 3px #3b5998;
    background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p {
    box-shadow:0 0 0 3px #dd4b39;
    background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena {
    font-size:14px;
    box-shadow:0 0 0 3px #008fde;
    background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket {
    box-shadow:0 0 0 3px #ef4056;
    background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line {
    box-shadow:0 0 0 3px #00c300;
    background-color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly {
    box-shadow:0 0 0 3px #2bb24c;
    background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss {
    box-shadow:0 0 0 3px #f26522;
    background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}

白いボタン

6.白いボタン

白い背景色のシンプルなボタン


/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    display:flex;
    flex-wrap:wrap;
    list-style:none;
}
 
.social-btn li {
    display:inline-block;
    width:100px;
    height:40px;
    margin:2px;
    padding:0;
    line-height:40px;
    font-size:22px;
    text-align:center;
    border:2px solid gray;
    border-radius:5px;
    background-color:#fff;
}
 
.social-btn a {
    text-decoration:none;
}

.social-btn a:hover {
    color:#fff;
}
 
/*各SNSの設定*/
.social-btn .social-btn_twitter a {
    color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook a {
    color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p a {
    color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena a {
    font-size:18px;
    color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket a {
    color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line a {
    color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly a {
    color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss a {
    color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}

/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    text-align:center;
    list-style:none;
}
 
.social-btn li {
    display:inline-block;
    width:40px;
    height:40px;
    margin:2px;
    padding:0;
    line-height:40px;
    font-size:22px;
    text-align:center;
    border:2px solid gray;
    border-radius:5px;
    background-color:#fff;
}
 
.social-btn a {
    text-decoration:none;
}

.social-btn a:hover {
    color:#fff;
}
 
/*各SNSの設定*/
.social-btn .social-btn_twitter a {
    color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook a {
    color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p a {
    color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena a {
    font-size:18px;
    color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket a {
    color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line a {
    color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly a {
    color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss a {
    color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}

丸いボタン

8.丸いボタン

/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    list-style:none;
    text-align:center;
}
 
.social-btn li {
    display:inline-block;
    width:40px;
    height:40px;
    margin:2px;
    padding:0;
    line-height:40px;
    font-size:16px;
    text-align:center;
    border-radius:50%;
}
 
.social-btn a {
    color:#fff;
    text-decoration:none;
}
 
/*各SNSの設定*/
.social-btn .social-btn_twitter {
    background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook {
    background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p {
    background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena {
    font-size:14px;
    background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket {
    background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line {
    background-color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly {
    background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss {
    background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}
9.丸いボタン

/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    list-style:none;
    text-align:center;
}
 
.social-btn li {
    display:inline-block;
    width:40px;
    height:40px;
    margin:5px;
    padding:0;
    line-height:40px;
    font-size:16px;
    text-align:center;
    border:1px solid #fff;
    border-radius:50%;
}
 
.social-btn a {
    color:#fff;
    text-decoration:none;
}
 
/*各SNSの設定*/
.social-btn .social-btn_twitter {
    box-shadow:0 0 0 3px #1da1f2;
    background-color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook {
    box-shadow:0 0 0 3px #3b5998;
    background-color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p {
    box-shadow:0 0 0 3px #dd4b39;
    background-color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena {
    box-shadow:0 0 0 3px #008fde;
    font-size:14px;
    background-color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket {
    box-shadow:0 0 0 3px #ef4056;
    background-color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line {
    box-shadow:0 0 0 3px #00c300;
    background-color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly {
    box-shadow:0 0 0 3px #2bb24c;
    background-color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss {
    box-shadow:0 0 0 3px #f26522;
    background-color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}
10.白い丸いボタン

/*-------------------------
  ソーシャルボタン
-------------------------*/
/*全体*/
.social-btn {
    margin:1em 0;
    text-align:center;
    list-style:none;
}
 
.social-btn li {
    display:inline-block;
    width:40px;
    height:40px;
    margin:2px;
    padding:0;
    line-height:40px;
    font-size:22px;
    text-align:center;
    border:2px solid gray;
    border-radius:50%;
    background-color:#fff;
}
 
.social-btn a {
    text-decoration:none;
}
 
.social-btn a:hover {
    color:#fff;
}
 
/*各SNSの設定*/
.social-btn .social-btn_twitter a {
    color:#1da1f2;
}
.social-btn .social-btn_twitter:hover {
    background-color:#7ccaf7;
}
 
.social-btn .social-btn_facebook a {
    color:#3b5998;
}
.social-btn .social-btn_facebook:hover {
    background-color:#6f8cc7;
}
 
.social-btn .social-btn_google-p a {
    color:#dd4b39;
}
.social-btn .social-btn_google-p:hover {
    background-color:#eb978e;
}
 
.social-btn .social-btn_hatena a {
    font-size:18px;
    color:#008fde;
}
.social-btn .social-btn_hatena:hover {
    background-color:#42bcff;
}
 
.social-btn .social-btn_pocket a {
    color:#ef4056;
}
.social-btn .social-btn_pocket:hover {
    background-color:#F69CA8;
}
 
.social-btn .social-btn_line a {
    color:#00c300;
}
.social-btn .social-btn_line:hover {
    background-color:#28FF28;
}
 
.social-btn .social-btn_feedly a {
    color:#2bb24c;
}
.social-btn .social-btn_feedly:hover {
    background-color:#f69ca8;
}
 
.social-btn .social-btn_rss a {
    color:#f26522;
}
.social-btn .social-btn_rss:hover {
    background-color:#f7a782;
}

リンク先

ボタンのHTMLには各SNSへのリンクは設定してありません。

各SNSへのリンクはHTML内の <a href="#"> の『#』部分に設定してください。

フォローのリンク先

フォローボタンとして使う場合はリンク先は『ご自分のプロフィール』ページを設定してください。

RSSボタンのリンク先

RSSのリンク先はご自分のサイトの『RSSフィードURL』になります。
RSSフィードURLがわからない方は以下の記事で調べ方について書いてありますので参考にしてください。

最後に

今回はソーシャルボタンを作ってみました。

プラグインやサービスのソーシャルボタンの方が設置が簡単で機能もいいですが、CSSで作ったソーシャルボタンの方が読み込みが速いし自分の好きなデザインにすることも可能です。

きらり

きらり

HTMLが共通だからCSSを変えればデザインを変えられるね!

結耶

結耶

気に入るデザインがあるかわかりませんが、よかったらご利用ください(*^^*)

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM