6 Switches SCSS Effect Apple Style

switches-iphone-style-scss

Here are 6 amazing SCSS style apple switches, these switches are completely free to download and use.

When completing a contact form you can use input field switches so that you can toggle (on/off) (yes/no) or whichever you prefer. You can also change the colour in the style.css file on line 99 and line 112.

.slider-v2::before {
  position: absolute;
  content: '';
  width: 4em;
  height: 1.5em;
  top: 0.75em;
  left: 0.75em;
  border-radius: 0.75em;
  transition: 250ms ease-in-out;
  background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #d0d0d0;
  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 0 0 0 0 rgba(68, 204, 102, 0.7) inset;
}
input:checked + .slider-v2::before {
  box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 rgba(68, 204, 102, 0.7) inset;
}

Below is the code used to make the switches.

<div class="wrap">
  
  <input type="checkbox" id="s1" />
  <label class="slider-v1" for="s1"></label>

  <input type="checkbox" id="s2" checked="" />
  <label class="slider-v1" for="s2"></label>
  
</div><!--/wrap-->
<div class="wrap">
  
  <input type="checkbox" id="s3" />
  <label class="slider-v2" for="s3"></label>
  
  <input type="checkbox" id="s4" checked="" />
  <label class="slider-v2" for="s4"></label>
  
</div><!--/wrap-->
<div class="wrap">
  
  <input type="checkbox" id="s5" />
  <label class="slider-v3" for="s5"></label>
  
  <input type="checkbox" id="s6" checked="" />
  <label class="slider-v3" for="s6"></label>
  
</div><!--/wrap-->

The html is standard but the css is using scss which means its a little different to normal css files. Im not going to post the scss as the code is quite long but feel free to download the code and take a look yourself.

 

JustUKFreebies

I am a freelance website designer, this is my blog website were I like to post freebie website templates and scripts and other cool useful stuff.

You may also like...

Leave a Reply

Your email address will not be published.