Switch by r7chardgh
#e8e8e8
1/* The switch - the box around the slider */ 2.switch { 3 font-size: 17px; 4 position: relative; 5 display: inline-block; 6 width: 5em; 7 height: 2.5em; 8 user-select: none; 9} 10 11/* Hide default HTML checkbox */ 12.switch .cb { 13 opacity: 0; 14 width: 0; 15 height: 0; 16} 17 18/* The slider */ 19.toggle { 20 position: absolute; 21 cursor: pointer; 22 width: 100%; 23 height: 100%; 24 background-color: #373737; 25 border-radius: 0.1em; 26 transition: 0.4s; 27 text-transform: uppercase; 28 font-weight: 700; 29 overflow: hidden; 30 box-shadow: -0.3em 0 0 0 #373737, -0.3em 0.3em 0 0 #373737, 31 0.3em 0 0 0 #373737, 0.3em 0.3em 0 0 #373737, 0 0.3em 0 0 #373737; 32} 33 34.toggle > .left { 35 position: absolute; 36 display: flex; 37 width: 50%; 38 height: 88%; 39 background-color: #f3f3f3; 40 color: #373737; 41 left: 0; 42 bottom: 0; 43 align-items: center; 44 justify-content: center; 45 transform-origin: right; 46 transform: rotateX(10deg); 47 transform-style: preserve-3d; 48 transition: all 150ms; 49} 50 51.left::before { 52 position: absolute; 53 content: ""; 54 width: 100%; 55 height: 100%; 56 background-color: rgb(206, 206, 206); 57 transform-origin: center left; 58 transform: rotateY(90deg); 59} 60 61.left::after { 62 position: absolute; 63 content: ""; 64 width: 100%; 65 height: 100%; 66 background-color: rgb(112, 112, 112); 67 transform-origin: center bottom; 68 transform: rotateX(90deg); 69} 70 71.toggle > .right { 72 position: absolute; 73 display: flex; 74 width: 50%; 75 height: 88%; 76 background-color: #f3f3f3; 77 color: rgb(206, 206, 206); 78 right: 1px; 79 bottom: 0; 80 align-items: center; 81 justify-content: center; 82 transform-origin: left; 83 transform: rotateX(10deg) rotateY(-45deg); 84 transform-style: preserve-3d; 85 transition: all 150ms; 86} 87 88.right::before { 89 position: absolute; 90 content: ""; 91 width: 100%; 92 height: 100%; 93 background-color: rgb(206, 206, 206); 94 transform-origin: center right; 95 transform: rotateY(-90deg); 96} 97 98.right::after { 99 position: absolute; 100 content: ""; 101 width: 100%; 102 height: 100%; 103 background-color: rgb(112, 112, 112); 104 transform-origin: center bottom; 105 transform: rotateX(90deg); 106} 107 108.switch input:checked + .toggle > .left { 109 transform: rotateX(10deg) rotateY(45deg); 110 color: rgb(206, 206, 206); 111} 112 113.switch input:checked + .toggle > .right { 114 transform: rotateX(10deg) rotateY(0deg); 115 color: #487bdb; 116} 117
8.2K views
8.2K views
MIT License