【css】アイコン次第で用途が変わるボタンのデザインコード

Author

トッド(Todd)

What Content?

SNSボタン作ってみた

良い感じのSNSボタンという名目で、作成したオシャレなボタンレイアウト。
決まったパターン箇所を書き換えることでリンクボタンとしても応用のあるコピペ&ペーストOKなソース紹介。


注意書き
カスタマイズは、子テーマを使用してください。紹介するソースコードには、不備がある場合がありますのでご自身での再確認・自己責任の方をおねがいします。

今回は、コピペ&ペーストでカスタマイズ要素のあるSNSボタンを作成してみました。SNSボタンのレイアウトを探している方の期待に沿うことが出来たらなぁ~と思います。

カスタマイズの方法、使い方、応用編を取り入れながら紹介していきたいと思います。

完成形はコチラになります

僕なりに良く使うんじゃないのかな?と感じるSNSを用いて、Facebook、Twitter、Instagram、Feedlyの4つをモデルにサンプルを作成してあります。

上記4つのボタン以外にその他、作成したい!と考えを抱く方もいると思うので、そのへんは順を追って説明していこうと思います。

ウキウキ

ボタンを実装するまでの準備手順

まずは、以下のCSSコードをまるごとコピーしてください。

CSS
.ssbtn {
  clear:both;
  white-space:nowrap;
  font-size:.8em;
  display:inline-block;
  border-radius:5px;
  margin:2px;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  overflow:hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.2);
}
.ssbtn:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,.2)
}
.ssbtn:focus {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);
}
.ssbtn > span,.btn-icon > i {
  float:left;
  padding:13px;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  line-height:1em
}
.ssbtn > span {
  padding:14px 18px 16px;
  white-space:nowrap;
  color:#fafafa;
  font-size: 1rem;
  font-weight: 600;
}
.ssbtn:focus > span {
  background:#233242;
}
.btn-icon > i {
  border-radius:5px 0 0 5px;
  position:relative;
  text-align:center;
  font-size:1.25rem;
  color:#fafafa;
  background:#30445a;
}
.btn-icon:hover > i,.btn-icon:focus > i {
  color:#fafafa
}
.btn-icon > span {
  border-radius:0 5px 5px 0
}
/*Facebook*/
.btn-facebook:hover > i,.btn-facebook:focus > i {
  color:#5971aa;
}
.btn-facebook > span {
  background:#7c95ec;
}
/*Twitter*/
.btn-twitter:hover > i,.btn-twitter:focus > i {
  color:#65a4c6;
}
.btn-twitter > span {
  background:#7dcdf7;
}
/*Feedly*/
.btn-feedly:hover > i,.btn-feedly:focus > i {
  color:#5ea667;
}
.btn-feedly > span {
  background:#85e991;
}
/*Instagram*/
.btn-instagram:hover > i,.btn-instagram:focus > i {
color: linear-gradient( 45deg, #b56b33, #ba3c56, #823a8d);
}
.btn-instagram > span {
background: linear-gradient( 45deg, #f79444, #ef4974, #a349b2);
}

上記のコード全体をコピーすることが出来たら、Wordpress管理画面メニューの外観からCSS編集を選択し、追加CSSにコードをペーストし、公開をクリックします。

これで使用するための準備は完了しました。

あと少し

ボタンを表示させたいところにHTMLコードを記述する

次に、下記のHTMLコードを先ほどと同じようにぐるっと全体をコピーしましょう。

HTML
<a class="ssbtn btn-icon btn-facebook" href="#"><i class="fab fa-facebook"></i><span>Facebook</span></a>
<a class="ssbtn btn-icon btn-twitter" href="#"><i class="fab fa-twitter"></i><span>Twitter</span></a>
<a class="ssbtn btn-icon btn-instagram" href="#"><i class="fab fa-instagram"></i><span>Instagram</span></a>
<a class="ssbtn btn-icon btn-feedly" href="#"><i class="fas fa-rss"></i><span>Feedly</span></a>

コピーすることが出来たら、表示させたいところにペーストしましょう。

例として、サイドバーにSNSボタンを表示させたいときの場合、Wordpress管理画面の外観からウィジェットを選択します。

そして、サイドバーのところにカスタムHTMLを挿入し、そのカスタムHTMLの中に今さっきコピーしたHTMLコードをペースト(貼り付け)し公開をクリックすると表示されるようになります。

応用

その他のSNSボタンやリンクボタンとして使用する

サンプルで紹介している4つのSNSボタン以外に、他を追加したいと考える人のためにココからは、この記事で紹介しているボタンレイアウトはそのままに随所を変更することで異なるボタンとして活用するための変更箇所を説明していこうと思います。

変更箇所は、アイコン・テキスト文・カラーの3つです。

例えば、以下のようにSNSボタンではなくリンクボタンとしての意味合いを持たせることが可能なボタンを作ることが出来ます。

続きをみる

仕組み解説

コチラのリンクボタンは次に書くHTMLコードとCSSコードで作られています。

HTML
<a class="ssbtn btn-icon btn-content" href="#"><i class="fas fa-external-link-alt"></i><span>続きをみる</span></a>
CSS
.btn-content:hover > i,.btn-content:focus > i {
  color:#4cdec4;
}
.btn-content > span {
  background:#ff777a;
}

1つのボタンあたりに上記のHTMLとCSSで1セットで成り立っているので新規のボタンを作成する際にはこの一式を変更しましょう。

アイコンはFontAwesome5を使用しています。

参考 FontAwesome4.7FontAwesome 参考 FontAwesome5FontAwesome

最後まで読んでいただき有難うございました。

コメントを残す

メールアドレスが公開されることはありません。