アイコン型WebフォントをCSSでデザインしたボタン10個

アイコン型WebフォントをCSSでデザインしてボタンをいろいろ作ってみました。よく似た記事を書いたことがある気もしますが、今回はフラットな感じにしてみました。

icon-btn00.png

別サーバーにサンプルを置いていますのでご確認ください。

今回のアイコンはFont Awesomeを使っています。使い方は以前記事にしていますのでこちらを参考にしてください。

ということで、まずこちらを読み込みます。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

これで準備はオッケーですので1つずつ解説します。

1. アイコンのみ

icon-btn.png

無駄な装飾はせず、普通にアイコンを並べるだけです。こういうのも意外と多いですね。

<div id="social-icon">
  <a href="#"><i class="fa fa-facebook fa-2x"></i></a>
  <a href="#"><i class="fa fa-twitter fa-2x"></i></a>
  <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
  <a href="#"><i class="fa fa-rss fa-2x"></i></a>
</div>

アイコンの大きさは2倍にしています。ちなみに、fa-lg(約1.33倍), fa-2x(2倍), fa-3x(3倍), fa-4x(4倍), fa-5x(5倍)の5パターンあります。

マウスを乗せたとき少し色が濃くなります。0to255を使えばいい感じの濃い色が取得できます。

#social-icon a { margin: 0; padding: 10px; }
#social-icon i { color: #c6bb80; }
#social-icon a:hover i { color: #bcaf68; }

2. 色つきの正方形のボタン

icon-btn.png

それぞれ色のついた四角のアイコンです。最近こういのは徐々に減っている気がします。

<div id="social-icon">
  <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
  <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
  <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
  <a href="#"><i class="fa fa-rss fa-lg"></i></a>
</div>

「fa-2x」を「fa-lg」に変えることで、先ほどのものよりアイコンを小さくしています。

#social-icon a {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  padding: 0;
  color: #fff;
}
#social-icon i {
  width: 50px;
  height: 50px;
  margin: 0;
  line-height: 50px;
  text-align: center;
}
#social-icon i:before { padding 0; line-height: 50px; }
#social-icon .fa-twitter { background: #00a1e9; }
#social-icon .fa-facebook { background: #3b5998; }
#social-icon .fa-google-plus { background: #c53727; }
#social-icon .fa-rss { background: #ff8c00; }

3. 同じ色の正方形のボタン

icon-btn.png

先ほどと同じ四角のボタンですが、今度は最初は同じ色で、マウスを乗せたときにそれぞれ違う色になります。HTMLは先ほどと一緒です。

#social-icon a {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  padding: 0;
  color: #fff;
}
#social-icon i {
  width: 50px;
  height: 50px;
  margin: 0;
  background: #c6bb80;
  line-height: 50px;
  text-align: center;
}
#social-icon i:before { padding 0; line-height: 50px; }
#social-icon a:hover .fa-twitter { background: #00a1e9; }
#social-icon a:hover .fa-facebook { background: #3b5998; }
#social-icon a:hover .fa-google-plus { background: #c53727; }
#social-icon a:hover .fa-rss { background: #ff8c00; }

4. 丸いボタン1

icon-btn.png

border-radius: 50%;で丸くします。マウスを乗せたときの色は全て同じにしています。

#social-icon a {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  padding: 0;
  color: #fff;
}
#social-icon i {
  width: 50px;
  height: 50px;
  margin: 0;
  border-radius: 50%;
  background: #c6bb80;
  line-height: 50px;
  text-align: center;
}
#social-icon i:before { padding 0; line-height: 50px; }
#social-icon a:hover i { background: #bcaf68; }

5. 丸いボタン2

icon-btn.png

先ほどと同じ丸いボタンですが、今度はボーダーで囲っています。

#social-icon a {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  padding: 0;
  color: #c6bb80;
}
#social-icon i {
  width: 50px;
  height: 50px;
  margin: 0;
  border: 1px solid #c6bb80;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
}
#social-icon i:before { padding 0; line-height: 50px; }
#social-icon a:hover i { background: #e1daba; }

6. 正方形のボタンが正方形に集まる

icon-btn.png

サイドに置く場合なんかにいいかもしれません。「#social-icon a:nth-of-type(3) { clear:both; }」で3つ目のアイコンの回りこみを解除しているだけです。「:nth-of-type(n) 」はIE8以下は対応していませんので注意が必要です。

#social-icon a {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  color: #fff;
}
#social-icon a:nth-of-type(3) { clear:both; }
#social-icon i {
  width: 50px;
  height: 50px;
  margin: 0;
  background: #777;
  line-height: 50px;
  text-align: center;
}
#social-icon i:before { padding 0; line-height: 50px; }
#social-icon .fa-twitter { background: #00a1e9; }
#social-icon .fa-facebook { background: #3b5998; }
#social-icon .fa-google-plus { background: #c53727; }
#social-icon .fa-rss { background: #ff8c00; }

7. 横長のボタン

icon-btn.png

ちょっと感じが変わります。フッターに置くときなんかにいいかもしれません。

アイコンの後にテキストが入りますので、HTMLが変わります。

<div id="social-icon" class="clear">
  <a href="#"><i class="fa fa-facebook fa-lg"></i>Facebook</a>
  <a href="#"><i class="fa fa-twitter fa-lg"></i>twitter</a>
  <a href="#"><i class="fa fa-google-plus fa-lg"></i>Google+</a>
  <a href="#"><i class="fa fa-rss fa-lg"></i>RSS</a>
</div>

アイコンの横幅分(40px)右にpaddingを取って、text-align:center;でテキストを真ん中に寄せると、うまいこと表示されます。

#social-icon a {
  position: relative;
  display: block;
  float: left;
  width:100px;
  margin: 0 10px 10px 0;
  padding: 0 0 0 40px;
  background: #c6bb80;
  color: #fff;
  text-decoration: none;
  text-align:center;
  line-height: 40px;
}
#social-icon i {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  background: #bcaf68;
  line-height: 40px;
  text-align: center;
}
#social-icon i:before { padding 0; line-height: 40px; }
#social-icon a:hover i { background: #b2a251; }

8. アイコンが下に消える

icon-btn.png

今度は動きがありますので、サンプルでマウスを乗せてご確認ください。

アイコンをテキストに重ねるようにしておいて、マウスを乗せたときに「top: 100%;」でテキストの下にくるようにします。ですが、「overflow: hidden;」があるので下にはみ出た部分は表示されません。ということで、アイコンが下に消えるように見えます。

transitionを使っているのでIE9以下は非対応です。ただ、機能的には問題ないです。

#social-icon a {
  position: relative;
  display: block;
  overflow: hidden;
  float: left;
  width:100px;
  margin: 0 10px 10px 0;
  padding: 0;
  background: #c6bb80;
  color: #fff;
  text-decoration: none;
  text-align:center;
  line-height: 40px;
}
#social-icon i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 40px;
  margin: 0;
  background: #bcaf68;
  line-height: 40px;
  text-align: center;
  transition: .2s;
}
#social-icon i:before { padding 0; line-height: 40px; }
#social-icon a:hover i { top: 100%; background: #b2a251; }

9. アイコンが右に消える

icon-btn.png

今度はアイコンが右に消えます。「top: 100%」を「left: 100%」にしただけです。

#social-icon a {
  position: relative;
  display: block;
  overflow: hidden;
  float: left;
  width:100px;
  margin: 0 10px 10px 0;
  padding: 0;
  background: #c6bb80;
  color: #fff;
  text-decoration: none;
  text-align:center;
  line-height: 40px;
}
#social-icon i {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 40px;
  margin: 0;
  background: #bcaf68;
  line-height: 40px;
  text-align: center;
  transition: .3s;
}
#social-icon i:before { padding 0; line-height: 40px; }
#social-icon a:hover i { left: 100%; background: #b2a251; }

10. アイコンひっくり返る

icon-btn.png

最後はオンマウスでアイコンをひっくり返します。

<div id="social-icon" class="clear">
  <a href="#"><i class="fa fa-facebook fa-lg"></i><span>Facebook</span></a>
  <a href="#"><i class="fa fa-twitter fa-lg"></i><span>twitter</span></a>
  <a href="#"><i class="fa fa-google-plus fa-lg"></i><span>Google+</span></a>
  <a href="#"><i class="fa fa-rss fa-lg"></i><span>RSS</span></a>
</div>

CSSはかなり長くなります。iとspanを表裏一体にする感じです。

#social-icon a {
  position: relative;
  display: block;
  overflow: hidden;
  float: left;
  width:100px;
  height: 40px;
  margin: 0 10px 10px 0;
  padding: 0;
  color: #fff;
  text-decoration: none;
  text-align:center;
  line-height: 40px;
}
#social-icon i,#social-icon span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 40px;
  margin: 0;
  background: #bcaf68;
  line-height: 40px;
  text-align: center;
  transition: .3s;
}
#social-icon i {
  z-index: 2;
  transform: rotateY(0deg);
}
#social-icon a:hover i {
  z-index: 1;
  transform: rotateY(180deg);
}
#social-icon span {
  z-index: 1;
  transform: rotateY(-180deg);
}
#social-icon a:hover span {
  z-index: 2;
  transform: rotateY(0deg);
}

さいごに

ということで10個作ってみました。

丸くてマウスを乗せたときの色がそれぞれにするなど、組み合わせると他にも色々作れます。

作り終えてからliで並べた方がいいのではという疑問がわきましたが、aだけで並べているサイトも結構あるのでそのまま掲載しました。

お役に立てたらうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加