ゴーストボタンは、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
あとがき
ゴーストボタンを効果的に使っているブログを紹介したいと思います。
大体、ゴーストボタンを紹介している所では、海外のサイトを紹介しています。
私は、和製のサイトを紹介します。
いつもながら、ネット徘徊しているときに見つけて、いいなぁ~と思ってしまいました。
ゴーストボタンをコレでもかっ!と使っています!!
もし、サイトのデザインが変わってたら、ごめんなさい。
私も、機会があれば、ゴーストボタンを取り入れらればいいなぁ~と思っています。
参考
ゴーストボタンを使った新しいデザイントレンド&参考Webサイトまとめ – Photoshop VIP
Webデザイントレンド定点観測 背景が透けてみえる「ゴーストボタン」 | Adobe Pinch In