クリックすると消えるゴーストボタンの作成

どうも。

ふとしたきっかけでゴーストボタンを作ることになったので、ちょっとチャレンジ。せっかくなので、CSSのみで作るのでなく、クリックすると消えるタイプを作ってみようと思います。ニコ動の再生ボタンと一緒に表示されてるアレみたいなものです。

JS( + jQuery)

・定義側
$.fn.ghost_button = function() {
  var ghost_clicked = false;
  var base_selector = $(this).attr('id');
  $(this).on('click', function() {
    var ghost_style = "<style type='text/css'>#" + base_selector + ":before{display: none;}</style>";
    if (!ghost_clicked) {
      $(this).before(ghost_style);
      ghost_clicked = true;
    }
  });
};

クリックしたら〜の条件を書くのは凄く楽なんですが、擬似要素beforeを使っているので少々面倒なやり方になります。なんといっても$()を使って直接その擬似要素にアクセスできないのが歯がゆいです。ES6以降で改善されるのでしょうかね。

対策として、擬似要素をさらに追加してdisplay: none;で上書きして見えなくすることで、体感的には.remove();したのと同じ状態になります。

CSS

#target:before {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 120px;
  height: 200px;
  content: "Start!"
  display: block;
  padding: 20px 20px;
  color: #FFF;
  border: solid 2px #ccc;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.2);
  font-weight: bold;
}
#target:hover:before {
  color: #999;
  background: rgba(0, 0, 0.5, 0.5);
  cursor: pointer;
}

擬似要素を使って作ります。hoverでマウスオーバー時の挙動をつけると、よりそれっぽくなります♪ここではwidth, height, top, legtはテキトーですが、もしニコ動みたく画面全体に広げたいなら直下の要素のwidth, heightと合わせればいいし、小さく用意したいならそう合わせればよし。

HTML

<div id="target">
  ここにゴーストボタン直下に置きたい要素
</div>

こちらは簡単に済みますね。JSで置けるのでたくさん置きたい時(そんな時ってあるか？)にも使えます。

今回はこの辺で！