Pure CSS Bulb Switch

index.html

<div class="switch">
	<input type="checkbox" name="toggle">
	<label for="toggle">
    <i class="bulb">
      <span class="bulb-center"></span>
      <span class="filament-1"></span>
      <span class="filament-2"></span>
      <span class="reflections">
        <span></span>
      </span>
      <span class="sparks">
        <i class="spark1"></i>
        <i class="spark2"></i>
        <i class="spark3"></i>
        <i class="spark4"></i>
      </span>
    </i>    
  </label>
</div>

pure-css-bulb-switch.markdown

Pure CSS Bulb Switch

Simple switch I've made inspired by awesome dribbble shot https://dribbble.com/shots/4229342-Light-Bulb-Switch

A Pen by Saijo George on CodePen.

License.

script.js

//Pure CSS Bubble Switch

//Inspired by: https://dribbble.com/shots/4229342-Light-Bulb-Switch 

// Making time ~ 3 hours

style.stylus

$ts-speed = .7s

body
  height 100vh
  display flex
  align-items center
  justify-content center
  background-color #514878
.switch
  position relative
  input
    height 100%
    width 100%
    position absolute
    left 0
    top 0
    opacity 0
    z-index 100
    cursor pointer
  label
    height 110px
    width 220px
    background-color #39315a
    border-radius 100px
    display block
    box-shadow: 
      inset 0 0 20px rgba(#000,0.2),
      inset 0 0 5px -2px rgba(#000,0.4)
    .bulb
      height 90px
      width 90px
      background-color #4a426b
      border-radius 50%
      position relative
      top 10px
      left 10px
      display block
      transition $ts-speed
      box-shadow:
        inset 0 0 1px 3px #4a426b,
        inset 0 0 6px 8px #423963,
        0 20px 30px -10px rgba(#000,0.4)
      .bulb-center
        position absolute
        display block
        height 36px
        width 36px
        background-color #5a527b
        border-radius 50%
        top 50%
        left 50%
        transition $ts-speed
        transform translate(-50%, -50%)
        box-shadow: 
          inset 0 0 0 4px #635a84
        &:after
          content ""
          display block
          height 14px
          width 14px
          background-color #7b7394
          border-radius 50%
          position absolute
          transition $ts-speed
          top 50%
          left 50%
          transform translate(-50%, -50%)
          box-shadow 0 0 2px 4px #524a73
      .filament-1, .filament-2
        position absolute
        display block
        height 35px
        width 35px
        border-radius 50%
        top 50%
        left 50%   
        overflow hidden
        transform translate(-50%, -50%) rotate(-45deg)
        &:after, &:before
          content ""
          display block
          height 6px
          width 17px
          border-radius 50%
          border 2px solid #4a426b
          position absolute
          transition $ts-speed
          top -4px
          left -2px
          transform rotate(-10deg)
        &:before
          left 15px
          transform rotate(10deg)
      .filament-2
        transform translate(-50%, -50%) rotate(45deg) !important
 
.reflections
  height 100%
  width 100%
  display block
  border-radius 50%
  overflow hidden
  position absolute
  z-index 90
  perspective 70px
  span
    height 80px
    width 80px
    border-radius 50%
    background-image linear-gradient(-135deg, transparent 10%, rgba(#fff,.3))
    position absolute
    left -40px
    bottom -45px
    &:after
      content ""
      display block
      height 35px
      width 20px
      position absolute
      top -36px
      right -40px
      border-radius 50%
      box-shadow 4px -2px 0 -3px rgba(#fff,.4)
      filter blur(1px)
      transform rotate(-10deg)     
  &:after
    content ""
    display block
    height 80px
    width 50px
    background-image linear-gradient(80deg, rgba(#fff,.05) 45%, rgba(#fff,.5))
    border-radius 10% 20% 50% 30% / 30% 60% 30% 40%
    position absolute
    transform-style: preserve-3d;
    transform: rotateX(-25deg)  rotate(-35deg) skewx(-15deg) translate(10px, -20px)
    top -8px
    left -5px
  &:before
    content ""
    display block
    position absolute
    height 10px
    width 30px
    background-image linear-gradient(to right, transparent, rgba(#fff,.15))
    bottom 10px
    right 0px
    transform rotate(45deg)

.sparks
  .spark1
    display block
    height 1px
    width 1px
    background-color #d1b82b
    position absolute
    right -5px
    border-radius 50%
    bottom 23px
    transition .4s
    opacity 0
  .spark2
    display block
    height 3px
    width 3px
    background-color #d1b82b
    position absolute
    right 20px
    border-radius 50%
    bottom 80px
    transition .4s
    opacity 0
  .spark3
    display block
    height 3px
    width 3px
    background-color #d1b82b
    position absolute
    left 20px
    border-radius 50%
    bottom 80px
    transition .4s
    opacity 0
  .spark4
    display block
    height 3px
    width 3px
    background-color #d1b82b
    position absolute
    left 20px
    border-radius 50%
    bottom 20px
    transition .4s
    opacity 0

    
    
  
.switch input:checked ~ label .bulb
  left 120px
  background-color #a7694a
  box-shadow:
    inset 0 0 1px 3px #a56758,
    inset 0 0 6px 8px #6b454f,
    0 20px 30px -10px rgba(#000,0.4),
    0 0 30px 50px rgba(#fdb843,.1)
    
.switch input:checked ~ label .bulb > .bulb-center
  background-color #feed6b
  box-shadow: 
    inset 0 0 0 4px #fdec6a,
    0 0 12px 10px #bca83c,
    0 0 20px 14px #a1664a
  &:after
    background-color #fef401
    box-shadow 0 0 2px 4px #fdb843
.switch input:checked ~ label .bulb > 
  &.filament-1, &.filament-2
    &:before, &:after
      border-color #fef4d5
      
.switch input:checked ~ label .bulb > .sparks 
  & .spark1
    height 1px
    width 1px
    animation spark1 2s ease-in-out
    animation-delay: .4s
  & .spark2
    height 1px
    width 1px
    animation spark2 2.4s ease-in-out
    animation-delay: .4s
  & .spark3
    height 1px
    width 1px
    animation spark3 2s ease-in-out
    animation-delay: .9s
  & .spark4
    height 1px
    width 1px
    animation spark4 1.7s ease-in-out
    animation-delay: .9s
  
  
  
@keyframes spark1
  0%
    right -5px
    height 1px
    width 1px
    opacity 0
  20%
    height 3px
    width 3px
    right 0px
    opacity 1
  30%
    right -5px
    opacity 1
    height 3px
    width 3px
  70%
    height 3px
    width 3px
  100%
    right -60px
    bottom 40px
    opacity 0
    
@keyframes spark2
  0%
    height 3px
    width 3px
    opacity 0
  30%
    opacity 1
  100%
    right -20px
    bottom 100px
    opacity 0
@keyframes spark3
  0%
    opacity 0
  30%
    opacity 1
    height 2px
    width 2px
  100%
    left 0px
    bottom 100px
    opacity 0
    height 3px
    width 3px
@keyframes spark4
  0%
    opacity 0
  30%
    opacity 1
    height 2px
    width 2px
  100%
    left -20px
    bottom -10px
    opacity 0
    height 3px
    width 3px