スマホ（iOS)のスイッチっぽいパーツをCSSで作ってみた

スマホを持っている人なら一度は見たことがあるであろうスイッチ。ひとつの要素でON/OFFを表現できる便利な子ですが、実はこれWebの標準パーツには存在しないんですよね。

でもこれだけ広く浸透しちゃうとWebでも使いたいってシーンも出てくるわけで、CSSだけでなんとか再現できないかなと作ってみることにしました。

ということで実際に作ったものがこちらになります。

See the Pen スマホアプリのSwitchっぽいUIをCSSで再現 by diwao (@diwao) on CodePen.

やってることをざっくり説明すると、htmlはbuttonタグだけで完結してます。クリックするごとにJavaScriptでclassを付け外しをしていて、アニーメションはcssにお任せです。

ちなみに、スイッチの玉のところはbuttonタグの::after擬似要素で、オンになると出てくる緑背景は::before擬似要素で表現してます。

そのふたつの擬似要素のleftやwidthプロパティをclassのありなしで変更していて、cssのtransitionプロパティでアニーメションさせているという仕組みです。なんとなくそれっぽくできたかな。

HTML

<div class="wrapper">
  <button id="switch" class="switch"></button>
</div>

CSS(SCSS)

*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrapper {
  padding: 1%;
}

.switch {
  appearance: none;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 15px;
  height: 25px;
  overflow: hidden;
  position: relative;
  width: 45px;

  &::after {
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 50%;
    box-shadow: 2px 0 rgba(0, 0, 0, .2);
    content: '';
    display: block;
    height: 25px;
    left: -1px;
    position: absolute;
    top: -1px;
    transition: .3s all;
    width: 25px;
  }

  &::before {
    background-color: limegreen;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: .3s all;
    width: 0;
  }

  &.js-active {
    &::after {
      box-shadow: none;
      left: 20px;
    }

    &::before {
      width: 100%;
    }
  }
}

JavaScript

$('#switch').on('click', function(){
  $(this).toggleClass('js-active');
});