Skip to content

Instantly share code, notes, and snippets.

@Poordeveloper

Poordeveloper/Switch button.markdown

Created November 10, 2015 16:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Poordeveloper/2a815ad528fe89abdcde to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Poordeveloper/2a815ad528fe89abdcde to your computer and use it in GitHub Desktop.
Download ZIP
Switch button
Raw
index.html
input(type='checkbox')#codepen.checkbox
label(for='codepen')
Raw
script.js
// Hi there ! ^_^
Raw
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)
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Cabin:700" rel="stylesheet" />
Raw
Switch button.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment