スポンサーリンク

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="#"><i class="fab fa-twitter"></i></a></li>
    <li class="social-btn_facebook"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
    <li class="social-btn_google-p"><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
    <li class="social-btn_hatena"><a href="#"><i class="icon-hatena1"></i></a></li>
    <li class="social-btn_pocket"><a  href="#"><i class="fab fa-get-pocket"></i></a></li>
    <li class="social-btn_line"><a  href="#"><i class="icon-line"></i></a></li>
    <li class="social-btn_feedly"><a  href="#"><i class="icon-feedly"></i></a></li>
    <li class="social-btn_rss"><a  href="#"><i class="fas fa-rss"></i></a></li>
</ul>

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

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

はてな
5行目
<li class="social-btn_hatena"><a href="#">B!</a></li>
LINE
7行目
<li class="social-btn_line"><a href="#"><i class="fad fa-comment"></i></a></li>
Feedly
8行目
<li class="social-btn_feedly"><a href="#"><i class="fas fa-rss"></i></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やアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。