FontAwesomeを使用した影付きCSSアイコンボタンを作れる！

Pocket

影付きアイコンボタンを作りました！

ホバー時にアイコンカラーと背景が反転します。

以下よりアイコンの設定、CSSの取得が可能です。

FontAwesomeアイコンを利用したCSS影付きボタン

好きなアイコンの設定方法やHTML・CSSのコピー方法については以下のリンクを参照してください。

SNSボタンをすぐに作れる！FontAwesome5を使用したCSSボタンメーカー

アイコンを横並びに表示する

上記のように複数のアイコンを横並びに表示するためのHTMLとCSSです。

HTML

<a href="#" class="btn-shadow-square btn-icon-5">
    <i class="fab fa-twitter"></i>
</a> 
<a href="#" class="btn-shadow-square btn-icon-37">
    <i class="fab fa-facebook"></i> 
</a> 
<a href="#" class="btn-shadow-square btn-icon-39"> 
    <i class="fab fa-youtube"></i> 
</a> 
<a href="#" class="btn-shadow-square btn-icon-38"> 
    <i class="fab fa-get-pocket"></i> 
</a> 
<a href="#" class="btn-shadow-square btn-icon-44"> 
    <i class="fab fa-github"></i> 
</a> 
<a href="#" class="btn-shadow-square btn-icon-41"> 
    <i class="fab fa-wordpress"></i> 
</a>

CSS

a.btn-shadow-square {
  display: inline-block;
  text-decoration: none;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin:2px;
  font-size: 25px;
  border-radius: 8px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  transition: 0.5s;
}
a.btn-icon-39{
  background: #ffffff;
  color:#cd201f;
}
a.btn-icon-39:hover {
  background: #cd201f;
  color:#ffffff;
}
a.btn-icon-38{
  background: #ffffff;
  color:#ef3f56;
}
a.btn-icon-38:hover {
  background: #ef3f56;
  color:#ffffff;
}
a.btn-icon-44{
  background: #ffffff;
  color:#181717;
}
a.btn-icon-44:hover {
  background: #181717;
  color:#ffffff;
}
a.btn-icon-41{
  background: #ffffff;
  color:#21759B;
}
a.btn-icon-41:hover {
  background: #21759B;
  color:#ffffff;
}
a.btn-icon-5{
  background: #ffffff;
  color:#22b8ff;
}
a.btn-icon-5:hover {
  background: #22b8ff;
  color:#ffffff;
}
a.btn-icon-37{
  background: #ffffff;
  color:#4267b2;
}
a.btn-icon-37:hover {
  background: #4267b2;
  color:#ffffff;
}

「a.btn-shadow-square」クラスは各ボタンの共通クラスです。共通クラス設定後はカラーと背景色を反転するための「a.btn-icon-［番号］」「a.btn-icon-［番号］;hover」クラスをコピーしてください。

以上がホバー時にカラー、背景が反転するが設定できるツールの解説でした。

最後まで読んでいただきありがとうございました。

Pocket