#e8e8e8
1.radio-input { 2 position: relative; 3 display: flex; 4 flex-direction: column; 5 margin: 10px; 6 width: 150px; 7 height: 50px; 8 cursor: pointer; 9} 10 11.radio-input .input { 12 position: absolute; 13 height: 100%; 14 width: 100%; 15 margin: 0; 16 cursor: pointer; 17 z-index: 10; 18 opacity: 0; 19} 20 21.radio-input .span { 22 position: relative; 23 display: block; 24 width: 100%; 25 height: 100%; 26 background: #323232; 27 border-radius: 10px; 28} 29 30.radio-input .span::before { 31 content: 'Inactive'; 32 position: absolute; 33 top: 3px; 34 left: 3px; 35 width: calc(100% - 6px); 36 height: calc(100% - 6px); 37 border-radius: 8px; 38 background: #666666; 39 box-shadow: inset -6px -6px 12px #2c2c2c, 40 inset 6px 6px 12px #a0a0a0; 41 color: #323232; 42 font-weight: 700; 43 font-size: 17px; 44 display: flex; 45 justify-content: center; 46 align-items: center; 47} 48 49.input:checked ~ .span::before { 50 content: 'Active'; 51 color: #ccc; 52 text-shadow: 1px 1px 0.5px rgba(0,255,0,0.3); 53 ; 54 border-radius: 8px; 55 background: #666666; 56 box-shadow: inset 6px 6px 12px #2c2c2c, 57 inset -6px -6px 12px #a0a0a0; 58} 59 60.radio-input .span::after { 61 content: ''; 62 height: 6px; 63 width: 6px; 64 border-radius: 100%; 65 background-color: red; 66 position: absolute; 67 top: calc(50% - 3px); 68 right: 20px; 69 box-shadow: 1px 1px 3px #9c0000, 70 -1px -1px 3px #ff0000; 71} 72 73.input:checked ~ .span::after { 74 background: #00ff00; 75 box-shadow: 1px 1px 3px #009c00, 76 -1px -1px 3px #00ff00; 77}
1.1K views
1.1K views
Comments
MIT License