#e8e8e8
1.toggle-border { 2 border: 2px solid #f0ebeb; 3 border-radius: 130px; 4 margin-bottom: 45px; 5 padding: 1px 2px; 6 background: linear-gradient(to bottom right, white, rgba(220,220,220,.5)), white; 7 box-shadow: 0 0 0 2px #fbfbfb; 8 cursor: pointer; 9 display: flex; 10 align-items: center; 11} 12 13.toggle-border:last-child { 14 margin-bottom: 0; 15} 16 17.toggle-border input[type="checkbox"] { 18 display: none; 19} 20 21.toggle-border label { 22 position: relative; 23 display: inline-block; 24 width: 65px; 25 height: 20px; 26 background: #d13613; 27 border-radius: 80px; 28 cursor: pointer; 29 box-shadow: inset 0 0 16px rgba(0,0,0,.3); 30 transition: background .5s; 31} 32 33.toggle-border input[type="checkbox"]:checked + label { 34 background: #13d162; 35} 36 37.handle { 38 position: absolute; 39 top: -8px; 40 left: -10px; 41 width: 35px; 42 height: 35px; 43 border: 1px solid #e5e5e5; 44 background: repeating-radial-gradient(circle at 50% 50%, rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, transparent 3%), conic-gradient(white 0%, silver 10%, white 35%, silver 45%, white 60%, silver 70%, white 80%, silver 95%, white 100%); 45 border-radius: 50%; 46 box-shadow: 3px 5px 10px 0 rgba(0,0,0,.4); 47 transition: left .4s; 48} 49 50.toggle-border input[type="checkbox"]:checked + label > .handle { 51 left: calc(100% - 35px + 10px); 52}
11K views
11K views
Comments
MIT License