オンオフ（トグル）ボタン

デモ

※ 当サイトのリセットCSSにはressを使用しています。

コピーする

input要素を１つ用意し、以下のように属性を設定してください。
・type="range"
・min="0"
・max="1"
・class="cca-onOffButton"

サンプルHTMLを表示する

オンオフ時の表示を切り替えたり、何かしらの処理を行いたい場合は JavaScript と組み合わせてください。

CSSコードの解説を見てみる

標準のスタイルを無効にするため-webkit-appearance: none;を当てます。
移動するボタンの大きさを30pxとし、横幅は２倍に、縦幅は等倍にします。
角丸の値は上下に2pxの余白が入るため、それを考慮して正円になる値にします。

移動するボタンにも標準のスタイルを無効にするため-webkit-appearance: none;を当てます。
大きさを30px、角丸は自身の半分50%にして正円にします。

機能に関するご質問は、このページの下部に表示されている Twitter のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM 等でご連絡ください。