WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： デザイン >WEBデザイン

最近のボタンデザインの流行の中でも「ゴーストボタン」を使用したWEBサイトを頻繁に見るようになりました。
そもそもゴーストボタンとは一体何かと言うと、ボタンの背景を半透明や、背景色が無く囲い線のみにしたボタンです。ボタンの背景が透けていて、WEBサイトの中に溶け込んでいる幽霊のようなボタンという所から、「ゴーストボタン（GhostButton）」と呼ばれています。

ボタンなどは通常目立たせて作りますが、WEBサイトのビジュアルや雰囲気を壊したくない時や、背景写真の邪魔にならないように配置したい時などに使われます。

そんなゴーストボタンの作り方を、PhotoshopとCSSを使用して説明していきます。

Photoshopによる作り方

ステップ1

まず始めに、キャンバスに背景を敷きます。
今回は明るいグラデーションの背景ですが、ゴーストボタンの場合
フラットデザインのような単色背景や、写真にぼかしが入っている背景によく合います。

ステップ2

背景を敷いたレイヤーの上に、【角丸長方形ツール】でボタンとなるシェイプを
配置します。

そしてこの時、【角丸の丸み】の設定は15pxとしています。
丸みの変更はここを好きに変えてみてください。

ステップ3

先ほど配置したシェイプに効果を付けていきます。
シェイプレイヤーをダブルクリックで、レイヤースタイルプロパティを表示します。

【境界線】
サイズ・・・10px
位置・・・内側
描画モード・・・通常
不透明度・・・100%
カラー・・・白

ステップ4

境界線の設置が完了したら、レイヤーパネル上の【塗り】を0%にします。
こうして、境界線のみが残った状態になります。

ステップ5

最後に、ボタンにする際のテキストを入れて完成です。
サイトの雰囲気に併せてフォントを変えるだけなので、シンプルなゴーストボタンは
汎用性がとても高いです。

Photoshopによるゴーストボタンの作り方は以上です。

次に、CSSによるゴーストボタンの作り方の紹介です。

CSSによる作り方

指定

body{
	background	: url(../img/img01.jpg) center center no-repeat;
}

article{
	margin	: 420px 0;
}

.btn01 {
	display			: inline-block;
	padding			: 0.5em 4em;
	border			: 2px solid #fff;
	color			: #fff;
	text-align		: center;
	text-decoration	: none;
	outline			: none;
}

.btn01 p{
	font-size	: 26px;
	text-align	: center;
	color		: #FFF;
	font-weight	: 600;
	padding		: 30px;
}

まずbodyに背景を敷きます。
次に、クラス名「.btn01」にゴーストボタンになる囲いの指定をしていきます。
「.btn01 p」ではゴーストボタン内に入るテキストへの指定です。

ここまでの指定で、WEBサイト上での見え方はこのようになりました。

背景をフルスクリーンでひいて、中央にゴーストボタンを配置しています。
指定方法はこれだけですが、よく見かけるランディングページのようなデザインになりました。

：hover指定

.btn01 a{
	font-size		: 26px;
	text-align		: center;
	color			: #FFF;
	font-weight		: 600;
	padding			: 30px;
	text-decoration	: none;
	cursor			: pointer;
}

.btn01:hover {
	box-shadow		: 0 0 45px rgba(255,255,255,0.6);
	transition		: all 0.3s;
}

先ほどのままでは動きも何も無いボタンなので、hoverアクションを付けていきます。
上記の指定でのポイントは、box-shadowでボックスに影をつけている所です。
影を付けて、さらにrgbaで色指定を白で0.6の半透明にしています。
そしてtransitionの指定で0.3秒かけてhoverアクションが動作するようになっています。

マウスがhoverした際この様になります。

難しい指定は無く、cssからでもゴーストボタンの実装は可能です。
皆さんお好きな方法で是非ゴーストボタンをサイトに取り入れてみてくださいね。