背景が透けてスタイリッシュ！ゴーストボタンを作ろう

こんにちは！オモトです！

みなさん、BiND9・BiNDクラウドに搭載されている新機能「リンクボタン」は活用されていますか？
リンクボタンとは、CSSだけで表現されているテキストボタンのことです。
今まで画像で作っていたボタンを、リンクボタン化することで、いちいち画像ボタンを作る必要がなくなったり、ちょっとした文字修正が簡単になったり、レスポンシブ化しやすかったり…とさまざまなメリットがあります！

BiNDではその「リンクボタン」をとっても簡単に作れちゃうんです！
基本的な使い方は、YouTube動画→[BiND9]リンクボタンを設定するをチェックしてください！
今回は、BiNDのリンクボタン機能を使って、背景が透けて見える「ゴーストボタン」というものを作る方法をご紹介します。
ちょこっとだけCSSを書きます。CSSを書くのは初めての方もいらっしゃるかと思いますが、最後に作例データをダウンロードできるので大丈夫。頑張ってついてきてくださいね！

まずはサンプルサイトをご覧ください。

名前は知らないけど、見たことあるぞという方もいらっしゃるかと思います。
ゴーストボタンとは、テキストを罫線で囲んだボタンのことです。ただし以下のような特徴を含んでいるものを指しています。

• ・シンプルな色（主に白が使われている）
• ・ボタンの背景色は透明もしくは半透明
• ・1pxなど華奢な罫線で囲んでいる

2014年頃に流行した表現ですが、今でもブランディングサイトや、キャンペーンサイトなどで使われていて、高級感やスケールの大きさの表現にはかかせないボタンとなっています。
では、早速作ってみましょう。

言葉で説明するよりわかりやすいかと思いますので、リンクボタンの編集画面までの作業の説明は省略させていただきます。詳しくはYouTube動画をチェックしてください！→ [BiND9]リンクボタンを設定する（0:23あたりまでの内容です）

リンクボタンのテンプレートをカスタマイズ

みなさんこの編集画面までたどりつけましたでしょうか？
まず、①のクラス名をクリックし、「.btn-default」を選んでください。

次に、画面右上の「テンプレート」ボタンをクリックします。BiNDにはリンクボタンのテンプレートがたくさん用意されているのですが、今回はスクエア型の「btn-default-simple-solid-gray.less」を選びます。選んだら適用をクリックしてください。

編集画面に戻ったら、左のお手本と同じように色を設定してください。

背景色・・・透明を選択
文字色・・・白を選択（#ffffff）
ボーダー・・・白を選択（#ffffff）
■マウスオーバー
背景色…白を選択（#ffffff）
文字色…白を選択（#ffffff）
ボーダー…白を選択（#ffffff）

終わったら、「class名ボタン」→「別名を保存する」をクリックし、任意の名前に変更して保存します。別名で保存すると、編集ウィンドウが閉じてしまうので、お手数ですがまた開いてください。

今の状態だと、マウスオーバーしたときに、ボタンが完全にまっしろになってしまいますね。次に、CSSを直接いじって、マウスオーバーしたときに背景色だけを半透明になるように変更します。

CSSをほんのちょっとだけ変更する

右上にある、「詳細編集モードにする」にチェックを入れます。すると、左の図のような怖い警告がでてきますが、気にせず「はい」を選択して進みましょう。

一番下までスクロールしていただいて、a.btn_ghost:hoverの括弧の中に書いてある、
@background-color-hover　を rgba（255,255,255,0.3）に書き直してください。

255,255,255 は、RGB表記での白を意味していて、0.3は、不透明度を指しています。1が、100%なので、0.3は30%の透明度となります。20%でもかっこよく決まりますし、お好みの薄さに設定してください。
これで完成です！

いかがでしたでしょうか？

ボーダーのスタイルや背景、文字の色を変えれば、シンプルで統一感のある、こんな表現も出来ちゃいます！ぜひ試してみてくださいね！

サンプルサイトで使用した４種類のボタンをセットにしたサイトデータをご用意しましたのでダウンロードしてご利用ください。（BiND9以降、BiNDクラウド対応）