Switch button

index.html

input(type='checkbox')#codepen.checkbox
label(for='codepen')

script.js

// Hi there ! ^_^

style.css

$red: #fd1a15
$green: #007177
$btnWidth: 116px
$switchWidth: 300px
$switchHeight: 130px
$padding: 7px

*
  box-sizing: border-box

html, body
  height: 100%

body
  display: flex
  align-items: center
  justify-content: center

.checkbox
  display: none

.checkbox + label
  display: inline-block
  position: relative
  width: $switchWidth
  height: $switchHeight
  background: linear-gradient(to right, $red 0, #fc8b34 45%, #7fd03e 55%, $green 100%) 0 0
  background-size: (($switchWidth * 2) + 50) 100%
  border-radius: 70px
  padding: $padding
  cursor: pointer
  transition: all 500ms ease
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) inset
  
  &:before
    content: 'Off'
    width: $btnWidth
    height: $btnWidth
    position: absolute
    left: $padding
    top: $padding
    border-radius: 100%
    background: #fff
    text-align: center
    line-height: ($switchHeight - ($padding * 2))
    font-family: 'Cabin', sans-serif
    font-size: 35px
    font-weight: bold
    color: $red
    letter-spacing: 3px
    text-transform: uppercase
    transition: left 500ms ease, color 500ms ease, transform 150ms ease
  
  &:active
    &:before
      transform: scale(0.95)

.checkbox:checked + label
  background-position-x: -($switchWidth + 50)
  &:before
    content: 'On'
    color: $green
    left: ($switchWidth - $btnWidth - $padding)

styles

<link href="https://fonts.googleapis.com/css?family=Cabin:700" rel="stylesheet" />

Switch button.markdown

Switch button

A pretty switch button. ~

Design by Nicolas Lanthemann : https://dribbble.com/shots/2328710-Daily-UI-ON-OFF

A Pen by Kyosuke on CodePen.

License.