webfeelfree

ゴーストボタンって知ってる?特徴と作り方

img_2014082302

ゴーストボタンは、2014年のWebデザインのトレンドにあげられている1つです。

ちょっと色気を出して、トレンドなんてモノを語ってみようと思います。

今回は、そのゴーストボタンの特徴を含め、HTMLやCSSのコーディングをメモっていきます。

ゴーストボタンとは?

トレンド?ゴーストボタン?と聞くと敷居が高いように感じますが、実際は、なんてことはありません。

罫線で囲んだ、ただのボタンです!

ただし、完全なルールではありませんが、以下にあげる特徴を含んでいるボタンのことを言います。

・シンプルなカラーリング
・ボタン背景は、透明もしくは薄い半透明
・シンプルなテキスト、または、シンプルなアイコンとシンプルなテキストで構成
・細めの罫線で囲む
・大きいめのボタン
・太めのフォント
・画面中央など、目立つ場所に配置
・画像や動画を背景とする場所に使われる

一見、シンプルで作るのは簡単なのですが、そのシンプルさだけに、使い方が難しいのも正直なところです。

メリットとしては、使う画像にもよりますが、クールで高級感のある雰囲気を演出してくれます。

逆に、デメリットは、背景とマッチしすぎて、ボタンか?どうか?分かりづらくなってしまう恐れがあるというところでしょうか。

メリット、デメリットを考えつつ、うまく使っていただければと思います。

HTMLのポイント

HTMLに関しては、これだけです。

<a href="#" class="demo1">POWER PUSH!</a>

単純にリンクを貼ったコードに、classを付加してします。
class名は、適当につけてください。

CSSのポイント

そして、CSSです。
今回は、ゴーストボタンだけのコーディングを紹介します。
ボタンの配置や全体の背景の設定などは、割愛します。

前述したように、罫線で囲んだボタンということで、比較的シンプルなコーディングです。

.demo1{
  display: inline-block;
  padding: 20px 20px;
  border: solid 2px #fff;
  border-radius: 3px;
  background: rgba(0,0,0,0.2);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
}
.demo1:hover{
  color: #333;
  background: #fff;
}

2、3行目で、ボタンを成形します。
今回の場合、display: inline-block;はあっても無くても、どちらでも大丈夫です。
paddingを使って、ボタンを大きさを決めています。

4~6行目は、ボタンの装飾部分です。
順番に「罫線の種類・太さ・色」、「罫線の角丸」、「ボタンの背景色」の指定になっています。

7~10行目は、ボタンのフォント設定になります。
こちらも順番に「フォントの色」、「フォントの装飾(下線の非表示)」、「フォントを太字」、「フォントの種類」を設定しています。

12~15行目は、マウスオーバー設定です。
今回は、文字の色と背景色が変わるよう設定しています。

サクッと説明してきましたが、それぞれのデザインに合わせて、カスタマイズしてください。 

デモ

See the Pen Ghost Button by webfeelfree (@webfeelfree) on CodePen.4259

あとがき

ゴーストボタンを効果的に使っているブログを紹介したいと思います。

img_2014082301
http://raw-fi.com/

大体、ゴーストボタンを紹介している所では、海外のサイトを紹介しています。
私は、和製のサイトを紹介します。

いつもながら、ネット徘徊しているときに見つけて、いいなぁ~と思ってしまいました。
ゴーストボタンをコレでもかっ!と使っています!!

もし、サイトのデザインが変わってたら、ごめんなさい。

私も、機会があれば、ゴーストボタンを取り入れらればいいなぁ~と思っています。

参考
ゴーストボタンを使った新しいデザイントレンド&参考Webサイトまとめ – Photoshop VIP
Webデザイントレンド定点観測 背景が透けてみえる「ゴーストボタン」 | Adobe Pinch In

最新記事

読まれている記事

ツイッター

カテゴリー