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

最新のBiNDに搭載されている新機能「リンクボタン」を使って、背景が透けるのが人気の「ゴーストボタン」を作る方法をご紹介します!

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

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

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

まずはサンプルサイトをご覧ください。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-0029-02-14-11-37-45

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

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

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

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

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

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

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

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

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

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

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

このコンテンツを閲覧するにはログインが必要です。→ . 会員登録はお済みですか? 会員について

関連記事