影付きアイコンボタンを作りました!
ホバー時にアイコンカラーと背景が反転します。
以下よりアイコンの設定、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」クラスをコピーしてください。
以上がホバー時にカラー、背景が反転するが設定できるツールの解説でした。
最後まで読んでいただきありがとうございました。
コメントを残す