<label for="interruptor-check" class="interruptor">
  Luz
</label>
<input type="checkbox" id="interruptor-check" class="interruptor-check" />
<svg viewBox="0 0 100 200" width="100%" height="100%" class="bombilla">
  <defs>
  <filter id="blur">
        <feGaussianBlur stdDeviation="4.9" />
    </filter>
  </defs>
 <rect x="55" y="0" width="4" height="50" fill="#444" /> 
<g transform="scale(.8) translate(20 50) rotate(180 50 50)">
  <circle cx="49" cy="50" r="50" class="halo" filter="url(#blur)" />
  <g>
      <path class="cristal" d="M48.468,69.721l-0.079-0.012c-0.977-0.139-1.949-0.266-2.917-0.393c-2.208-0.289-4.492-0.589-6.711-1.017      c-2.861-0.552-4.051-2.092-3.857-4.994c0.242-3.611-1.385-6.576-3.009-9.001c-0.872-1.301-1.819-2.592-2.735-3.838      c-0.882-1.201-1.793-2.442-2.645-3.702c-3.468-5.14-5.136-10.093-5.1-15.143c0.07-9.692,4.494-17.257,13.148-22.486      c4.359-2.634,9.046-3.97,13.931-3.97c12.21,0,23.266,8.417,26.289,20.014c1.66,6.36,0.748,12.679-2.71,18.781      c-1.142,2.016-2.521,3.924-3.853,5.769c-0.643,0.89-1.286,1.779-1.905,2.684c-1.793,2.617-3.598,5.25-4.146,8.364      c-0.099,0.56-0.083,1.151-0.066,1.778c0.008,0.298,0.016,0.597,0.011,0.891c-0.042,2.866-1.159,4.306-3.734,4.815      c-2.27,0.447-4.602,0.752-6.856,1.046c-0.991,0.129-1.983,0.26-2.976,0.4L48.468,69.721z M48.494,6.297      c-4.675,0-9.166,1.281-13.346,3.807c-8.295,5.012-12.536,12.254-12.603,21.526c-0.035,4.815,1.57,9.558,4.906,14.503      c0.838,1.241,1.743,2.473,2.619,3.665c0.923,1.256,1.877,2.556,2.763,3.878c1.729,2.583,3.461,5.755,3.198,9.705      c-0.154,2.304,0.67,3.371,2.943,3.809c2.186,0.421,4.352,0.705,6.644,1.005c0.946,0.125,1.896,0.25,2.85,0.385      c0.968-0.139,1.938-0.266,2.909-0.391c2.236-0.293,4.549-0.595,6.783-1.034c2.05-0.406,2.789-1.381,2.823-3.722      c0.004-0.28-0.004-0.563-0.012-0.846c-0.017-0.655-0.035-1.333,0.084-2.005c0.591-3.354,2.467-6.091,4.279-8.735      c0.672-0.982,1.321-1.88,1.969-2.777c1.315-1.821,2.675-3.703,3.787-5.665c3.308-5.838,4.183-11.874,2.6-17.939      C70.794,14.358,60.197,6.297,48.494,6.297z"/>

    <path class="filamento" fill-rule="evenodd" clip-rule="evenodd" d="M55.377,42.856c-1.038-0.107-2.033,0.223-3.586,1.292    c-2.082-1.679-4.256-1.792-6.446-0.006c-0.143-0.079-0.287-0.136-0.404-0.229c-3.084-2.43-6.954-0.449-7.598,3.344    c-0.381,2.246,0.075,4.388,1.1,6.339c1.885,3.581,3.905,7.094,5.927,10.6c0.796,1.388,1.275,2.795,1.177,4.415    c-0.001,0.029-0.001,0.058-0.003,0.087c0.103,0,0.203-0.013,0.304-0.013c0.407,0,0.807,0.028,1.201,0.073    c0.007-2.114-0.626-4.023-1.749-5.875c-1.887-3.108-3.657-6.29-5.358-9.505c-0.999-1.89-1.616-3.934-1.087-6.128    c0.108-0.453,0.281-0.911,0.516-1.313c1.097-1.887,3.154-2.167,4.845-0.641c-1.866,2.854-2.609,5.87-1.737,9.169    c0.471,1.785,1.535,2.766,2.847,2.745c1.273-0.021,2.438-1.094,2.825-2.799c0.742-3.278,0.14-6.329-1.781-9.094    c1.366-1.339,2.812-1.363,4.172-0.184c-0.569,1.509-1.191,2.947-1.651,4.435c-0.512,1.669-0.407,3.374,0.095,5.044    c0.5,1.656,1.608,2.643,2.884,2.599c1.247-0.045,2.381-1.113,2.766-2.751c0.705-3.001,0.251-5.84-1.348-8.486    c-0.13-0.216-0.279-0.42-0.416-0.628c1.529-1.635,3.915-1.306,4.985,0.711c0.945,1.779,0.796,3.655,0.096,5.43    c-0.693,1.757-1.562,3.453-2.466,5.113c-1.27,2.333-2.604,4.636-3.981,6.905c-0.986,1.625-1.465,3.339-1.39,5.231    c0.001,0.062,0.001,0.122,0.002,0.182c0.488-0.159,0.99-0.287,1.497-0.398c0.008-0.506,0.021-1.013,0.063-1.516    c0.072-0.841,0.513-1.69,0.938-2.452c1.713-3.064,3.507-6.088,5.228-9.148c1.139-2.026,2.013-4.164,2.084-6.533    C60.019,45.71,58.309,43.159,55.377,42.856z M46.96,52.789c-0.064,0.678-0.218,1.394-0.527,1.989    c-0.211,0.407-0.769,0.886-1.161,0.877c-0.399-0.009-1.04-0.519-1.129-0.91c-0.283-1.244-0.506-2.537-0.476-3.804    c0.039-1.619,0.607-3.135,1.635-4.565C46.653,48.365,47.173,50.49,46.96,52.789z M53.417,53.127    c-0.082,0.642-0.292,1.305-0.597,1.876c-0.545,1.02-1.631,1.067-2.022,0.008c-0.432-1.181-0.654-2.501-0.658-3.763    c-0.007-1.713,0.555-3.327,1.655-4.874C53.225,48.515,53.719,50.736,53.417,53.127z"/>
    <g class="casquillo">
      <path d="M56.322,82.582c-2.847,0.276-13.61,0.279-15.88,0.01c-1.067-0.124-2.04-0.12-2.584,1.034     c-0.508,1.078-0.037,1.896,0.742,2.562c0.629,0.538,1.313,1.049,2.05,1.416c1.513,0.758,3.096,1.222,4.73,1.441     c0.963,0.129,4.27,0.214,4.922,0.132c2.865-0.344,5.663-0.908,7.892-2.949c0.76-0.697,1.255-1.536,0.728-2.581     C58.379,82.572,57.424,82.475,56.322,82.582z"/>
      <path d="M58.046,76.501c-1.827,0.279-7.066,0.865-7.853,0.899c-3.792,0.15-7.563-0.16-11.312-0.903     c-1.429-0.286-2.466,0.417-2.687,1.661c-0.241,1.359,0.423,2.329,1.985,2.553c3.351,0.481,17.385,0.457,20.871-0.007     c1.073-0.145,1.767-0.769,1.857-1.907C61.042,77.139,59.872,76.226,58.046,76.501z"/>
      <path d="M38.371,75.112c3.36,0.438,17.889,0.311,20.643-0.073c1.513-0.212,2.249-1.342,1.956-2.607     c-0.296-1.279-1.222-1.795-2.745-1.554c-1.261,0.201-2.521,0.424-3.791,0.559c-0.615,0.066-1.229,0.119-1.844,0.165     c-4.545,0.331-9.069,0.092-13.577-0.733c-1.681-0.309-2.684,0.346-2.877,1.712C35.944,73.933,36.715,74.896,38.371,75.112z"/>
    </g>
  </g>
  </g>
</svg>
html,body{
  height: 100%;
}

body{
  background-color: #666;
  text-align: center;
  margin: 0;
}

.interruptor-check{
  display: none;
}

.interruptor{
  position: absolute;
  left: 50px;
  top: 50px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  background-color: #ECECEC;
  padding: 5px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  color: rgba(0,0,0,.4);
  box-shadow: 2px 3px 0;
}

.interruptor:hover{
  cursor: pointer;
  color: rgba(0,0,0,.3);
}

.interruptor:active{
  box-shadow: none;
}



.halo{
  fill: lightyellow;
  transform: scale(.2);
  transform-origin: 50%;
  opacity: 0;
  
}

.cristal{
  fill: rgba(0,0,0,.1);
}

.casquillo{
  fill: #333;
}

.filamento{
  fill: #777;
}


.interruptor-check:checked + .bombilla .filamento{
  animation: filam 5s;
  animation-fill-mode: forwards;
}

.interruptor-check:checked + .bombilla .halo{
  animation: hal 3s 3s;
  animation-fill-mode: forwards;
}

@keyframes filam{
  0%{
    fill:orange;
  }
  5%{
   fill: #777; 
  }
  10%{
    fill: orange;
  }
  15%{
    fill: #777;
  }
  100%{
    fill: orange;
  }
}

@keyframes hal{
  100%{
     opacity: 1;
     transform: scale(.9) translateY(-20px);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.