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

2014.08.27
CSS , WEB

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

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

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

このページの目次

ゴーストボタンとは？
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行目は、マウスオーバー設定です。
今回は、文字の色と背景色が変わるよう設定しています。

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