Checkbox by JOBOYA
#e8e8e8
1.checkbox { 2 position: relative; 3 display: inline-block; 4 cursor: pointer; 5 font-size: 16px; 6 color: #666; 7 line-height: 1.5; 8 margin-bottom: 20px; 9 font-family: Arial, sans-serif; 10 user-select: none; 11} 12 13.checkbox input { 14 position: absolute; 15 opacity: 0; 16 cursor: pointer; 17} 18 19.checkmark { 20 position: absolute; 21 top: 0; 22 left: 0; 23 height: 30px; 24 width: 30px; 25 border: 2px solid #666; 26 border-radius: 5px; 27 transition: all 0.2s ease-in-out; 28 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 29} 30 31.checkbox:hover .checkmark { 32 transform: translateX(-20px) translateY(-2px) rotate(10deg); 33 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 34} 35 36.checkbox input:checked ~ .checkmark { 37 background-color: #666; 38 border-color: #666; 39} 40 41.checkbox input:checked ~ .checkmark:before { 42 content: ''; 43 position: absolute; 44 top: 50%; 45 left: 50%; 46 width: 8px; 47 height: 14px; 48 border: solid #fff; 49 border-width: 0 2px 2px 0; 50 transform: translate(-50%, -50%) rotate(45deg); 51} 52 53.text { 54 margin-left: 40px; 55 display: inline-block; 56 transition: all 0.2s ease-in-out; 57} 58
1.2K views
1.2K views
MIT License