CSSだけでボタンが出入りするトグルボタンを実装

こんにちは、シロマ。

今回は、下のデモのようなクリックするとボタンがにゅっと出てくるトグルボタンを実装します。
デモの左下にあるボタンをクリックしてみて下さい。

demo

このブログでもウィンドウサイズが狭くなると、フォローボタンがトグルボタンに収納されます。

JavaScriptを使わずに、CSSだけで実装できます。

実装方法

それではまず、HTML。

<div class="in-out">
  <input type="checkbox" id="in-out-checkbox">
  <label for="in-out-checkbox" class="in-out-label">
    <span class="tate"></span>
    <span class="yoko"></span>
  </label>
  <button type="button" class="button1">1</button>
  <button type="button" class="button2">2</button>
  <button type="button" class="button3">3</button>
</div>

そして、CSS。

.in-out {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
}
.in-out button,
.in-out-label {
  position: absolute;
  background-color: #ddd;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  transition: all .3s;
  box-shadow: 2px 2px 4px rgba(0,0,0,.2);
  cursor: pointer;
}
.in-out button {
  top: 0;
  opacity: 0;
  z-index: 10;
}
.in-out-label {
  z-index: 20;
}
.in-out-label span {
  position: absolute;
  background-color: #aaa;
  display: block;
  transition: all .3s;
}
.in-out-label .tate {
  width: 4px;
  height: 24px;
  left: 23px;
  top: 13px;
}
.in-out-label .yoko {
  width: 24px;
  height: 4px;
  left: 13px;
  top: 23px;
}
.in-out input[type="checkbox"] {
  display: none;
}
.in-out input[type="checkbox"]:checked + .in-out-label .tate {
  height: 0;
  top: 25px;
}
.in-out input[type="checkbox"]:checked ~ button {
  opacity: 1;
}
.in-out input[type="checkbox"]:checked ~ .button1 {
  top: -210px;
}
.in-out input[type="checkbox"]:checked ~ .button2 {
  top: -140px;
}
.in-out input[type="checkbox"]:checked ~ .button3 {
  top: -70px;
}

長いね。

ポイントとしてはCSSにちょっと変わったセレクタを使用している点ですね。

セレクタの「+」は隣接する兄弟要素、「~」は後の兄弟要素に適用されます。あまり使われないセレクタなので、知らない人もいるかもしれません。

あと、アコーディオンメニューとか作る時にinputのチェックボックスは結構使えるので、覚えておくと便利かと思います。