Switch by csemszepp
#e8e8e8
1.switch { 2 position: relative; 3 display: inline-block; 4 width: 80px; 5 height: 80px; 6 border: 2px solid #dcdcdc; 7 background: #e0e0e0; 8 box-shadow: 7px 7px 23px #bebebe, -7px -7px 23px #ffffff; 9 overflow: hidden; 10 border-radius: 60px; 11} 12 13.switch input { 14 opacity: 0; 15 width: 0; 16 height: 0; 17} 18 19.slider { 20 position: absolute; 21 cursor: pointer; 22 top: 0; 23 left: 0; 24 right: 0; 25 bottom: 0; 26 -webkit-transition: 0.5s; 27 transition: 0.5s; 28} 29 30.chbox:checked + .slider:before { 31 background: white; 32 box-shadow: none; 33} 34 35.chbox:focus + .slider { 36 box-shadow: 0 0 1px #2196f3; 37} 38 39.slider { 40 color: #9a9a9a; 41 display: flex; 42 align-items: center; 43 justify-content: center; 44 font-size: 11px; 45 font-family: sans-serif; 46} 47 48.slider--0 { 49 color: white; 50 font-weight: 600; 51 background-color: #49d84e; 52} 53 54.slider--1 div { 55 transition: 0.5s; 56} 57 58.slider--1 div { 59 position: absolute; 60 width: 100%; 61 height: 50%; 62 left: 0; 63} 64 65.chbox:checked ~ .slider--1 div:first-child { 66 transform: translateY(-100%); 67 transition-delay: 1s; 68} 69 70.chbox:checked ~ .slider--1 div:last-child { 71 transform: translateY(100%); 72 transition-delay: 1s; 73} 74 75.chbox:checked ~ .slider--2 { 76 transform: translateX(100%); 77 transition-delay: 0.5s; 78} 79 80.chbox:checked ~ .slider--3 { 81 transform: translateX(-100%); 82 transition-delay: 0s; 83} 84 85.slider--1 div:first-child { 86 transform: translateY(0); 87 top: 0; 88 background-color: #f3f3f3; 89 transition-delay: 0s; 90} 91 92.slider--1 div:last-child { 93 transform: translateY(0); 94 bottom: 0; 95 background-color: #f3f3f3; 96 border-top: 1px solid #e0e0e0; 97 transition-delay: 0s; 98} 99 100.slider--2 { 101 background-color: #e6e6e6; 102 transition-delay: 0.5s; 103 transform: translateX(0); 104 border-left: 1px solid #d2d2d2; 105} 106 107.slider--3 { 108 background-color: #d2d2d2; 109 transition-delay: 1s; 110 transform: translatex(0); 111 border-right: 1px solid #d2d2d2; 112} 113
668 views
668 views
MIT License