Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.
Futuristic 3D switch button using html css
For full source code visit : https://freecodez.com/post/yyed3zy
<!-- https://freecodez.com -->
<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>
?>
</g>
</svg>
Source Code : https://freecodez.com/post/yyed3zy
For more such articles visit : https://freecodez.com
Top comments (0)