909 views
1.customCheckBoxHolder { 2 margin: 5px; 3 display: flex; 4} 5 6.customCheckBox { 7 width: fit-content; 8 position: relative; 9 overflow: hidden; 10 cursor: pointer; 11 user-select: none; 12 padding: 2px 8px; 13 background-color: rgba(0, 0, 0, 0.16); 14 border-radius: 0px; 15 color: rgba(255, 255, 255, 0.7); 16 transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); 17 transition-duration: 300ms; 18 transition-property: color, background-color, box-shadow; 19 display: flex; 20 height: 32px; 21 align-items: center; 22 box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px 1px 1px 0px; 23 outline: none; 24 justify-content: center; 25 min-width: 55px; 26} 27 28.customCheckBox:hover { 29 background-color: #2c2c2c; 30 color: white; 31 box-shadow: rgba(0, 0, 0, 0.23) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px; 32} 33 34.customCheckBox .inner { 35 font-size: 18px; 36 font-weight: 900; 37 pointer-events: none; 38 transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); 39 transition-duration: 300ms; 40 transition-property: transform; 41 transform: translateY(0px); 42} 43 44.customCheckBox:hover .inner { 45 transform: translateY(-2px); 46} 47 48/* Multiple Checkboxes can be chained together for a radio input */ 49.customCheckBoxWrapper:first-of-type .customCheckBox { 50 border-bottom-left-radius: 5px; 51 border-top-left-radius: 5px; 52 border-right: 0px; 53} 54 55.customCheckBoxWrapper:last-of-type .customCheckBox { 56 border-bottom-right-radius: 5px; 57 border-top-right-radius: 5px; 58 border-left: 0px; 59} 60 61.customCheckBoxInput { 62 display: none; 63} 64 65.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox { 66 background-color: #2d6737; 67 color: white; 68 box-shadow: rgba(0, 0, 0, 0.23) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.17) 0px 2px 4px 1px; 69} 70 71.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox .inner { 72 transform: translateY(-2px); 73} 74 75.customCheckBoxInput:checked + .customCheckBoxWrapper .customCheckBox:hover { 76 background-color: #34723f; 77 box-shadow: rgba(0, 0, 0, 0.26) 0px -4px 1px 0px inset, rgba(255, 255, 255, 0.17) 0px -1px 1px 0px, rgba(0, 0, 0, 0.15) 0px 3px 6px 2px; 78} 79 80.customCheckBoxWrapper .customCheckBox:hover .inner { 81 transform: translateY(-2px); 82}
MIT License