Switch by Nawsome

Made by

@Nawsome

Theme:

Light

#skeuomorphism#switch#on#off

#e8e8e8

413 views

CSSAdd prefixes

1body {
2  font-size: 20px;
3  background-color: #d5d9e0;
4  padding: 40px;
5}
6
7#checkbox-on {
8  display: none;
9}
10
11.control-element {
12  cursor: pointer;
13}
14
15.text-label {
16  font-size: 1.8em;
17  font-family: sans-serif;
18  fill: #6D7788;
19  text-shadow: 0 0.02em 0.1em rgba(0, 0, 0, 0.35);
20  pointer-events: none;
21}
22
23.noselect {
24  -webkit-touch-callout: none;
25  -webkit-user-select: none;
26  -khtml-user-select: none;
27  -moz-user-select: none;
28  -ms-user-select: none;
29  user-select: none;
30}
31
32.position-container {
33  cursor: pointer;
34}
35
36.svg-switch-container {
37  width: 10em;
38}
39

body {
  font-size: 20px;
  background-color: #d5d9e0;
  padding: 40px;
}

#checkbox-on {
  display: none;
}

.control-element {
  cursor: pointer;
}

.text-label {
  font-size: 1.8em;
  font-family: sans-serif;
  fill: #6D7788;
  text-shadow: 0 0.02em 0.1em rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.position-container {
  cursor: pointer;
}

.svg-switch-container {
  width: 10em;
}

HTML

1<svg xml:space="preserve" viewBox="0 0 500 300" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="svg-switch-container" version="1.1">
2  <defs>
3     <linearGradient y2="331.0775" x2="360" y1="149.0088" x1="360" gradientUnits="userSpaceOnUse" id="SVGID_1_">
4		<stop style="stop-color:#636F7C" offset="0"></stop>
5		<stop style="stop-color:#5A6571" offset="1"></stop>
6	</linearGradient>
7    
8    <filter height="160%" width="200%" y="-30%" x="-50%" id="inset-shadow-big-bottom">
9        <feOffset dy="2" dx="0"></feOffset>                                                         
10        <feGaussianBlur result="offset-blur" stdDeviation="1"></feGaussianBlur>                           
11        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
12        <feFlood result="color" flood-opacity="1" flood-color="#FFF"></feFlood>                     
13        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
14        <feComponentTransfer result="shadow" in="shadow">                                   
15            <feFuncA type="linear"></feFuncA>
16        </feComponentTransfer>
17        <feComposite result="final-shadow-1" in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
18      
19        <feOffset dy="-4" dx="0"></feOffset>                                                         
20        <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>                           
21        <feComposite result="inverse" in2="offset-blur" in="final-shadow-1" operator="out"></feComposite> 
22        <feFlood result="color" flood-opacity="1" flood-color="#999"></feFlood>                     
23        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
24        <feComponentTransfer result="shadow" in="shadow">                                   
25            <feFuncA type="linear"></feFuncA> 
26        </feComponentTransfer>
27        <feComposite result="final-shadow-2" in2="final-shadow-1" in="shadow" operator="over"></feComposite>                    
28      
29      
30      <feGaussianBlur result="blur" stdDeviation="4" in="SourceAlpha"></feGaussianBlur> 
31      <feOffset result="offsetblur" dy="3" dx="0"></feOffset>
32
33      <feComponentTransfer in="offsetblur" result="shadow1">
34        <feFuncA type="linear"></feFuncA>
35      </feComponentTransfer>
36      
37      <feMerge> 
38        <feMergeNode in="shadow1"></feMergeNode>
39        <feMergeNode in="final-shadow-2"></feMergeNode> 
40      </feMerge>
41      
42      
43    </filter>
44    
45     <filter id="inset-shadow-container">
46        <feOffset dy="2" dx="0"></feOffset>                                                         
47        <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>                           
48        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
49        <feFlood result="color" flood-opacity="1" flood-color="#555"></feFlood>                     
50        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
51        <feComponentTransfer result="shadow" in="shadow">                                   
52            <feFuncA type="linear"></feFuncA>
53        </feComponentTransfer>
54        <feComposite in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
55    </filter>
56    
57    <filter id="inset-shadow-container-big">
58        <feOffset dy="0" dx="0"></feOffset>                                                         
59        <feGaussianBlur result="offset-blur" stdDeviation="5"></feGaussianBlur>                           
60        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
61        <feFlood result="color" flood-opacity="1" flood-color="#555"></feFlood>                     
62        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
63        <feComponentTransfer result="shadow" in="shadow">                                   
64            <feFuncA type="linear"></feFuncA>
65        </feComponentTransfer>
66        <feComposite in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
67    </filter>
68    
69    <filter height="150%" width="150%" y="-20%" x="-50%" id="big-gaussian-blur">
70      <feGaussianBlur result="base-blur" stdDeviation="25"></feGaussianBlur>
71    </filter>
72    
73
74    
75    <filter height="120%" width="150%" y="0" x="-10%" id="drop-shadow">
76      <feOffset dy="14" dx="0" in="SourceGraphic" result="offOut"></feOffset>
77      <feColorMatrix values="0.2 0 0 
78              0 0 0 0.2 
79              0 0 0 0 0 
80              0.2 0 0 0 
81              0 0 0.5 0" type="matrix" in="offOut" result="matrixOut"></feColorMatrix>
82      <feGaussianBlur stdDeviation="6" in="matrixOut" result="blurOut"></feGaussianBlur>
83      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend>
84    </filter>
85    
86        
87    <filter height="120%" width="120%" y="0" x="-10%" id="drop-shadow-checkbox">
88      <feOffset dy="10" dx="0" in="SourceGraphic" result="offOut"></feOffset>
89      <feColorMatrix values="0.0 0 0 
90              0 0 0 0.0 
91              0 0 0 0 0 
92              0.0 0 0 0 
93              0 0 0.35 0" type="matrix" in="offOut" result="matrixOut"></feColorMatrix>
94      <feGaussianBlur stdDeviation="10" in="matrixOut" result="blurOut"></feGaussianBlur>
95      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend>
96    </filter>
97
98    
99  </defs>
100<g transform="translate(-130 -110)" class="svg-switch">
101	<g filter="url(#big-gaussian-blur)" opacity="1" style="fill:#F4847D;" id="mild-glow">
102			<path d="M254.949,330.381l-79.336-79.336c-6.1-6.1-6.1-15.991,0-22.091l79.336-79.336c6.1-6.1,15.991-6.1,22.091,0l79.336,79.336
103				c6.1,6.1,6.1,15.991,0,22.091l-79.336,79.336C270.939,336.481,261.049,336.481,254.949,330.381z"></path>
104	</g>
105	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37
106		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
107		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
108		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:#F3F3F0;" filter="url(#drop-shadow)" id="base-outline"></path>
109
110	<path d="M538.979,229.371l-76.344-76.344c-2.935-2.935-6.782-4.403-10.629-4.403H266.328v0.101
111		c-3.274,0.363-6.452,1.791-8.962,4.301l-76.344,76.344c-5.87,5.87-5.87,15.388,0,21.258l76.344,76.344
112		c2.51,2.51,5.689,3.938,8.962,4.301v0.101h185.678c3.847,0,7.694-1.468,10.629-4.403l76.344-76.344
113		C544.849,244.759,544.849,235.241,538.979,229.371z" filter="url(#inset-shadow-container-big)" style="fill:url(#SVGID_1_);" id="base-container"></path>
114	
115
116   <path d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
117		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
118		C269.989,317.94,261.999,317.94,257.071,313.013z" filter="url(#inset-shadow-container)" class="position-container" style="fill:#525C6B;" id="start_container"></path> 
119  
120    <path d="M445.083,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
121		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
122		C458.001,317.94,450.011,317.94,445.083,313.013z" filter="url(#inset-shadow-container)" style="fill:#525C6B;" class="position-container" id="end_container"></path>
123	
124  
125   <text y="255" x="225" class="text-label noselect">OFF</text>
126   <text y="255" x="430" class="text-label noselect">ON</text>  
127  
128  <g transform="translate(0)" id="checkbox-off"> 
129		<path d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846l64.09-64.09
130			c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
131			C269.989,317.94,261.999,317.94,257.071,313.013z" filter="url(#drop-shadow-checkbox)" style="fill:#F5F3EE;" id="off-bot-cap"></path>
132		<path d="M257.942,305.884l-57.832-57.832c-4.447-4.447-4.447-11.656,0-16.103l57.832-57.832
133			c4.447-4.447,11.656-4.447,16.103,0l57.832,57.832c4.447,4.447,4.447,11.656,0,16.103l-57.832,57.832
134			C269.599,310.331,262.389,310.331,257.942,305.884z" style="fill:#F4847D;" id="off-color"></path>
135		<path d="M259.757,291.032l-44.795-44.795c-3.444-3.444-3.444-9.029,0-12.473
136			l44.795-44.795c3.444-3.444,9.029-3.444,12.473,0l44.795,44.795c3.444,3.444,3.444,9.029,0,12.473l-44.795,44.795
137			C268.786,294.477,263.202,294.477,259.757,291.032z" filter="url(#inset-shadow-big-bottom)" style="fill:#FFFFFF;" id="off-top-cap"></path>
138	</g>
139  
140  <g id="control-group">
141    	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
142		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
143		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
144		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:transparent" id="controlon" class="control-element"></path>
145    
146        	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
147		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
148		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
149		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:transparent" transform="translate(0 300)" class="control-element" id="controloff"></path>
150  </g>
151  
152   <animateTransform values="0 0 ; 0 300" fill="freeze" dur="0.01s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controlon"></animateTransform>
153  
154    <animateTransform values="0 300 ; 0 0" fill="freeze" dur="0.01s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controloff"></animateTransform>
155  
156  <animateTransform values="0 300 ; 0 0" fill="freeze" dur="0.01s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controlon"></animateTransform>
157  
158    <animateTransform values="0 0 ; 0 300" fill="freeze" dur="0.01s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controloff"></animateTransform>  
159  
160  
161  
162    <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="0;-5;200;180;188;" fill="freeze" dur="0.3s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#checkbox-off"></animateTransform>
163  
164   <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="188;193;-12; 8; 0" fill="freeze" dur="0.3s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#checkbox-off"></animateTransform>
165  
166    <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="188;193;-12; 8; 0" fill="freeze" dur="0.3s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#mild-glow"></animateTransform>
167  
168      <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="0;-5;200;180;188;" fill="freeze" dur="0.3s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#mild-glow"></animateTransform>
169  
170  
171  ?&gt;
172  
173  
174  
175    
176  
177   
178  
179     
180  
181   
182  
183  
184
185
186</g>
187</svg>

<svg xml:space="preserve" viewBox="0 0 500 300" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="svg-switch-container" version="1.1">
  <defs>
     <linearGradient y2="331.0775" x2="360" y1="149.0088" x1="360" gradientUnits="userSpaceOnUse" id="SVGID_1_">
		<stop style="stop-color:#636F7C" offset="0"></stop>
		<stop style="stop-color:#5A6571" offset="1"></stop>
	</linearGradient>
    
    <filter height="160%" width="200%" y="-30%" x="-50%" id="inset-shadow-big-bottom">
        <feOffset dy="2" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="1"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#FFF"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite result="final-shadow-1" in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
      
        <feOffset dy="-4" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="final-shadow-1" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#999"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA> 
        </feComponentTransfer>
        <feComposite result="final-shadow-2" in2="final-shadow-1" in="shadow" operator="over"></feComposite>                    
      
      
      <feGaussianBlur result="blur" stdDeviation="4" in="SourceAlpha"></feGaussianBlur> 
      <feOffset result="offsetblur" dy="3" dx="0"></feOffset>

      <feComponentTransfer in="offsetblur" result="shadow1">
        <feFuncA type="linear"></feFuncA>
      </feComponentTransfer>
      
      <feMerge> 
        <feMergeNode in="shadow1"></feMergeNode>
        <feMergeNode in="final-shadow-2"></feMergeNode> 
      </feMerge>
      
      
    </filter>
    
     <filter id="inset-shadow-container">
        <feOffset dy="2" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="2"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#555"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
    </filter>
    
    <filter id="inset-shadow-container-big">
        <feOffset dy="0" dx="0"></feOffset>                                                         
        <feGaussianBlur result="offset-blur" stdDeviation="5"></feGaussianBlur>                           
        <feComposite result="inverse" in2="offset-blur" in="SourceGraphic" operator="out"></feComposite> 
        <feFlood result="color" flood-opacity="1" flood-color="#555"></feFlood>                     
        <feComposite result="shadow" in2="inverse" in="color" operator="in"></feComposite>               
        <feComponentTransfer result="shadow" in="shadow">                                   
            <feFuncA type="linear"></feFuncA>
        </feComponentTransfer>
        <feComposite in2="SourceGraphic" in="shadow" operator="over"></feComposite>                    
    </filter>
    
    <filter height="150%" width="150%" y="-20%" x="-50%" id="big-gaussian-blur">
      <feGaussianBlur result="base-blur" stdDeviation="25"></feGaussianBlur>
    </filter>
    

    
    <filter height="120%" width="150%" y="0" x="-10%" id="drop-shadow">
      <feOffset dy="14" dx="0" in="SourceGraphic" result="offOut"></feOffset>
      <feColorMatrix values="0.2 0 0 
              0 0 0 0.2 
              0 0 0 0 0 
              0.2 0 0 0 
              0 0 0.5 0" type="matrix" in="offOut" result="matrixOut"></feColorMatrix>
      <feGaussianBlur stdDeviation="6" in="matrixOut" result="blurOut"></feGaussianBlur>
      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend>
    </filter>
    
        
    <filter height="120%" width="120%" y="0" x="-10%" id="drop-shadow-checkbox">
      <feOffset dy="10" dx="0" in="SourceGraphic" result="offOut"></feOffset>
      <feColorMatrix values="0.0 0 0 
              0 0 0 0.0 
              0 0 0 0 0 
              0.0 0 0 0 
              0 0 0.35 0" type="matrix" in="offOut" result="matrixOut"></feColorMatrix>
      <feGaussianBlur stdDeviation="10" in="matrixOut" result="blurOut"></feGaussianBlur>
      <feBlend mode="normal" in2="blurOut" in="SourceGraphic"></feBlend>
    </filter>

    
  </defs>
<g transform="translate(-130 -110)" class="svg-switch">
	<g filter="url(#big-gaussian-blur)" opacity="1" style="fill:#F4847D;" id="mild-glow">
			<path d="M254.949,330.381l-79.336-79.336c-6.1-6.1-6.1-15.991,0-22.091l79.336-79.336c6.1-6.1,15.991-6.1,22.091,0l79.336,79.336
				c6.1,6.1,6.1,15.991,0,22.091l-79.336,79.336C270.939,336.481,261.049,336.481,254.949,330.381z"></path>
	</g>
	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:#F3F3F0;" filter="url(#drop-shadow)" id="base-outline"></path>

	<path d="M538.979,229.371l-76.344-76.344c-2.935-2.935-6.782-4.403-10.629-4.403H266.328v0.101
		c-3.274,0.363-6.452,1.791-8.962,4.301l-76.344,76.344c-5.87,5.87-5.87,15.388,0,21.258l76.344,76.344
		c2.51,2.51,5.689,3.938,8.962,4.301v0.101h185.678c3.847,0,7.694-1.468,10.629-4.403l76.344-76.344
		C544.849,244.759,544.849,235.241,538.979,229.371z" filter="url(#inset-shadow-container-big)" style="fill:url(#SVGID_1_);" id="base-container"></path>
	

   <path d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
		C269.989,317.94,261.999,317.94,257.071,313.013z" filter="url(#inset-shadow-container)" class="position-container" style="fill:#525C6B;" id="start_container"></path> 
  
    <path d="M445.083,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846
		l64.09-64.09c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
		C458.001,317.94,450.011,317.94,445.083,313.013z" filter="url(#inset-shadow-container)" style="fill:#525C6B;" class="position-container" id="end_container"></path>
	
  
   <text y="255" x="225" class="text-label noselect">OFF</text>
   <text y="255" x="430" class="text-label noselect">ON</text>  
  
  <g transform="translate(0)" id="checkbox-off"> 
		<path d="M257.071,313.013l-64.09-64.09c-4.928-4.928-4.928-12.918,0-17.846l64.09-64.09
			c4.928-4.928,12.918-4.928,17.846,0l64.09,64.09c4.928,4.928,4.928,12.918,0,17.846l-64.09,64.09
			C269.989,317.94,261.999,317.94,257.071,313.013z" filter="url(#drop-shadow-checkbox)" style="fill:#F5F3EE;" id="off-bot-cap"></path>
		<path d="M257.942,305.884l-57.832-57.832c-4.447-4.447-4.447-11.656,0-16.103l57.832-57.832
			c4.447-4.447,11.656-4.447,16.103,0l57.832,57.832c4.447,4.447,4.447,11.656,0,16.103l-57.832,57.832
			C269.599,310.331,262.389,310.331,257.942,305.884z" style="fill:#F4847D;" id="off-color"></path>
		<path d="M259.757,291.032l-44.795-44.795c-3.444-3.444-3.444-9.029,0-12.473
			l44.795-44.795c3.444-3.444,9.029-3.444,12.473,0l44.795,44.795c3.444,3.444,3.444,9.029,0,12.473l-44.795,44.795
			C268.786,294.477,263.202,294.477,259.757,291.032z" filter="url(#inset-shadow-big-bottom)" style="fill:#FFFFFF;" id="off-top-cap"></path>
	</g>
  
  <g id="control-group">
    	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:transparent" id="controlon" class="control-element"></path>
    
        	<path d="M452.006,140.624H266.328c-0.848,0-1.665,0.132-2.431,0.376c-4.598,0.832-8.878,3.06-12.188,6.37 
		l-76.344,76.344c-8.98,8.98-8.98,23.592,0,32.572l76.344,76.344c3.31,3.31,7.59,5.537,12.188,6.37
		c0.767,0.244,1.584,0.376,2.431,0.376h185.678c6.152,0,11.936-2.396,16.286-6.746l76.344-76.344c8.98-8.98,8.98-23.592,0-32.572
		l-76.344-76.344C463.942,143.02,458.158,140.624,452.006,140.624L452.006,140.624z" style="fill:transparent" transform="translate(0 300)" class="control-element" id="controloff"></path>
  </g>
  
   <animateTransform values="0 0 ; 0 300" fill="freeze" dur="0.01s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controlon"></animateTransform>
  
    <animateTransform values="0 300 ; 0 0" fill="freeze" dur="0.01s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controloff"></animateTransform>
  
  <animateTransform values="0 300 ; 0 0" fill="freeze" dur="0.01s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controlon"></animateTransform>
  
    <animateTransform values="0 0 ; 0 300" fill="freeze" dur="0.01s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#controloff"></animateTransform>  
  
  
  
    <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="0;-5;200;180;188;" fill="freeze" dur="0.3s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#checkbox-off"></animateTransform>
  
   <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="188;193;-12; 8; 0" fill="freeze" dur="0.3s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#checkbox-off"></animateTransform>
  
    <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="188;193;-12; 8; 0" fill="freeze" dur="0.3s" begin="controloff.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#mild-glow"></animateTransform>
  
      <animateTransform keyTimes="0;0.1;0.5; 0.9;1" values="0;-5;200;180;188;" fill="freeze" dur="0.3s" begin="controlon.click" type="translate" attributeType="XML" attributeName="transform" xlink:href="#mild-glow"></animateTransform>
  
  
  ?&gt;
  
  
  
    
  
   
  
     
  
   
  
  


</g>
</svg>