Checkbox by nanda248
#e8e8e8
1/* Hide the default checkbox */ 2.container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6 height: 0; 7 width: 0; 8} 9 10.container { 11 display: block; 12 position: relative; 13 cursor: pointer; 14 font-size: 20px; 15 user-select: none; 16} 17 18/* Create a custom checkbox checkmark=outer-circle */ 19.circle { 20 display: flex; 21 flex-direction: column; 22 justify-content: center; 23 align-items: center; 24 width: 6em; 25 height: 6em; 26 border-radius: 50%; 27 border: 6px solid #838996; 28 background-color: #282828; 29 box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset; 30} 31 32.circle span { 33 color: #e5e4e2; 34 font-size: small; 35} 36 37.circle .led { 38 width: 1em; 39 height: 0.2em; 40 background-color: #BBBBBB; 41 border-radius: 5px; 42 transition: 0.4s; 43} 44 45.engine-text { 46 margin-top: 0.75em; 47 font-weight: 500; 48} 49 50.start-text, .stop-text { 51 font-weight: 600; 52} 53 54/* When the checkbox is checked, add a blue background */ 55.container input:checked ~ .circle .led { 56 background-color: #FDDA16; 57 box-shadow: #FDDA16 0px 1px 0px, #FDDA16 0px 0px 8px; 58} 59 60.container input:checked ~ .circle { 61 box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, 62 rgba(14, 30, 37, 0.32) 0px 2px 16px 0px, 63 inset 3px 3px 8px 1px #485871, 64 inset -3px -3px 8px 1px #485871; 65}
649 views
649 views
MIT License