【CSS】シンプルなCSS3トグルスイッチボタンCSS3 Switch

CSS

CSS3 Switch

July 8, 2018

CSS3 SwitchはシンプルなCSS3トグルスイッチボタン

Markup

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css3-switch/index.css">
<label class="switch [style]">
	<input class="switch-input" type="checkbox" />
	<span class="switch-label" data-on="<on_text>" data-off="<off_text>"></span> 
	<span class="switch-handle"></span> 
</label>
<!--
  [style]:
  - switch-left-right
  - switch-flat
  - switch-yes-no
  - switch-slide
  - switch-light
-->


<label class="switch switch-left-right">
	<input class="switch-input" type="checkbox" />
	<span class="switch-label" data-on="On" data-off="Off"></span> 
	<span class="switch-handle"></span> 
</label>

MIT

Latest Posts

Related Posts