Checkbox by Custyyyy
#e8e8e8
1#_checkbox { 2 display: none; 3} 4 5label { 6 position: absolute; 7 top: 50%; 8 right: 0; 9 left: 0; 10 width: 30px; 11 height: 30px; 12 margin: 0 auto; 13 background-color: #f72414; 14 transform: translateY(-50%); 15 border-radius: 50%; 16 cursor: pointer; 17 transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow; 18 overflow: hidden; 19 z-index: 1; 20} 21 22label:before { 23 content: ""; 24 position: absolute; 25 top: 50%; 26 right: 0; 27 left: 0; 28 width: 24px; 29 height: 23px; 30 margin: 0 auto; 31 background-color: #fff; 32 transform: translateY(-50%); 33 border-radius: 50%; 34 box-shadow: inset 0 7px 10px #ffbeb8; 35 transition: 0.2s ease width, 0.2s ease height; 36} 37 38label:hover:before { 39 transform: translateY(-50%) scale(1.1); 40 box-shadow: inset 0 7px 10px #ff9d96; 41} 42 43label:active { 44 transform: translateY(-50%) scale(0.9); 45} 46 47#tick_mark { 48 position: absolute; 49 top: 0px; 50 right: 0; 51 left: 0; 52 width: 15px; 53 height: 18px; 54 margin: 0 auto; 55 margin-left: 5px; 56 transform: rotateZ(-40deg); 57} 58 59#tick_mark:before, #tick_mark:after { 60 content: ""; 61 position: absolute; 62 background-color: #fff; 63 border-radius: 2px; 64 opacity: 0; 65 transition: 0.2s ease transform, 0.2s ease opacity; 66} 67 68#tick_mark:before { 69 left: 0; 70 bottom: 0; 71 width: 4px; 72 height: 10px; 73 box-shadow: -2px 0 5px rgba(0,0,0,0.23); 74 transform: translateY(-68px) 75} 76 77#tick_mark:after { 78 left: 0; 79 bottom: 0; 80 width: 100%; 81 height: 4px; 82 box-shadow: 0 3px 5px rgba(0,0,0,0.23); 83 transform: translateX(78px) 84} 85 86#_checkbox:checked + label { 87 background-color: #07d410; 88} 89 90#_checkbox:checked + label:before { 91 width: 0; 92 height: 0; 93} 94 95#_checkbox:checked + label #tick_mark:before, #_checkbox:checked + label #tick_mark:after { 96 transform: translate(0); 97 opacity: 1; 98}
5.2K views
5.2K views
MIT License