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