Dark switch button

Dark switch button.markdown

Dark switch button

Design belongs: http://dribbble.com/shots/745485-Switch?list=users

Work perfectly only in Chrome!

A Pen by katmai7 on CodePen.

License.

index.html

<div class="wrap metrouicss">
  <input type="checkbox" id="check" />
  <label for="check" class="switch">
    <i class="icon-eye-open"></i>
    <i class="icon-off"></i>
    <div class="slide"></div>
  </label>
  <input type="checkbox" id="check2" checked/>
  <label for="check2" class="switch p2">
    <i class="icon-eye-open"></i>
    <i class="icon-off"></i>
    <div class="slide"></div>
  </label>
    <div class="line"></div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

html{
  height: 100%;
}

body{
  height: 100%;
  background: #C1D1DA;
  background: radial-gradient(ellipse at center, rgba(92,93,95,1) 0%,rgba(47,48,49,1) 100%);
}

.wrap{
  position:relative;
  margin: 100px auto;
  width: 90px;
  height: 100px;
  border: 1px solid #1F1F20;
  border-radius: 5px;
  background: linear-gradient(to bottom, rgba(58,59,60,1) 0%,rgba(28,28,29,1) 100%);
  box-shadow:inset 0 3px 4px -2px rgba(94,96,96, 1), 0 0 6px -1px rgba(0,0,0, .8), 0 2px 7px -1px rgba(0,0,0, .5);
  
  .line{
    position: absolute;
    top: 50px;
    width: 100%;
    border-top: 1px solid #1B1B1C;
    border-bottom: 1px solid #323334;
  }
}


.switch{
  position: relative;
  display: block;
  margin: 13px 17px;
  width: 55px;
  height: 25px;
  border: 1px solid #1A1A1B;
  border-radius: 20px;
  background: linear-gradient(to bottom, rgba(31,31,32,1) 0%,rgba(58,58,58,1) 100%);
  box-shadow: 0 1px 1px 0 rgba(130,132,134, .6), inset 0 4px 0 -3px rgba(0,0,0, .3);
  cursor: pointer;
  transition: box-shadow .5s ease .27s, border-color .5s ease .27s;
  user-select: none;
  
  &:hover{
    .slide:after{
      opacity: .05;
    }
  }
  
  &.p2{
    margin-top: 25px;
  }
  
  &:after{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: green;
    background: linear-gradient(to bottom, rgba(186,101,82,1) 0%,rgba(215,151,101,1) 100%);background: linear-gradient(to bottom, rgba(186,101,82,1) 0%,rgba(215,151,101,1) 100%);
    content: "";
    opacity: 0;
    transition: opacity .5s ease .27s;
  }
  
  &:before{
    position: absolute;
    display: block;
    width: 95%;
    height: 60%;
    border-radius: 20px;
    background: #fff;
    content: "";
    opacity: .03;
  }
  
  .icon-off, .icon-eye-open{
    position: absolute;
    z-index: 2;
    display: block;
    line-height: 25px;
    font-size: 18px;
  }
  
  .icon-eye-open{
    left: 5px;
    color: #EDD6CD;
    text-shadow: 0 1px 0 #97614B;
  }
  
  .icon-off{
    top: 1px;
    right: 5px;
    color: #6D6F70;
  }
  
  .slide{
    position: absolute;
    top: -1px;
    left: -2px;
    z-index:5;
    width: 25px;
    height: 25px;
    border: 1px solid #171718;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(64,65,66,1) 0%,rgba(30,30,31,1) 100%);
    box-shadow:inset 0 1px 2px 0 rgba(93,94,95, .8), 1px 3px 5px -2px rgba(0,0,0, .7);
    transition: left .4s ease-in, border-color .4s ease-in .1s;
    
    &:after{
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: linear-gradient(to bottom, rgba(243,232,223,1) 0%,rgba(204,169,140,1) 100%);
      content: "";     
      opacity: 0;
      transition: opacity .4s ease .1s;
    }
  }
}

input[type=checkbox]{
  display: none;
  
  &:checked{
    + .switch{
        border-color: #4D2318;
        box-shadow: 0 1px 1px 0 rgba(130,132,134, .6), inset 0 4px 0 -3px rgba(0,0,0, .3), 0 0 15px 0 rgba(213,147,99, .7);
      
        &:after{
          opacity: 1;
        }
      
        .slide{
          left: 29px; 
          border-color: #704F3F;
            &:after{
              opacity: 1;
            }
        }
    }
  }
}