Оригианльный тумблер - пример html js css

• HTML код


• CSS код
• Результат кода

<label class="saw-switch">

	<span class="saw-switch__inner">

		<input class="saw-switch__input" type="checkbox" value="on">

		<span class="saw-switch__sr">Saw Switch</span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

		<span class="saw-switch__blade"></span>

	</span>

</label>

    html { font-size: 15px; }

    html, body { margin: 0; padding: 0; min-height: 100%; }

    body { height:100%; display: flex; flex-direction: column; }

    .referer-warning {

      background: black;

      box-shadow: 0 2px 5px rgba(0,0,0, 0.5);

      padding: 0.75em;

      color: white;

      text-align: center;

      font-family: var(--cp-font-family);

      line-height: 1.2;

      font-size: 1rem;

      position: relative;

      z-index: 2;

    }

    .referer-warning h1 { font-size: 1.2rem; margin: 0; }

    .referer-warning a { color: #56bcf9; } /* $linkColorOnBlack */