Checkbox by gharsh11032000
#212121
1.checkbox { 2 display: inline-block; 3 position: relative; 4 cursor: pointer; 5} 6 7.checkbox__input { 8 position: absolute; 9 opacity: 0; 10 width: 0; 11 height: 0; 12} 13 14.checkbox__label { 15 display: inline-block; 16 padding-left: 30px; 17 margin-bottom: 10px; 18 position: relative; 19 font-size: 16px; 20 color: #fff; 21 cursor: pointer; 22 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 23} 24 25.checkbox__custom { 26 position: absolute; 27 top: 0; 28 left: 0; 29 width: 20px; 30 height: 20px; 31 background: linear-gradient(#212121, #212121) padding-box, 32 linear-gradient(145deg,#e81cff, #40c9ff) border-box; 33 border: 2px solid transparent; 34 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 35} 36 37.checkbox__input:checked + .checkbox__label .checkbox__custom { 38 background-image: linear-gradient(145deg,#e81cff, #40c9ff); 39 transform: rotate(45deg) scale(0.8); 40} 41 42.checkbox__label:hover .checkbox__custom { 43 transform: scale(1.2); 44} 45 46
941 views
941 views
MIT License