Checkbox by m-muzammal
#e8e8e8
1.reject-checkbox .checkbox-wrapper * { 2 -webkit-tap-highlight-color: transparent; 3 outline: none; 4} 5.reject-checkbox .checkbox-wrapper input[type="checkbox"] { 6 display: none; 7} 8.reject-checkbox .checkbox-wrapper label { 9 --size: 50px; 10 --shadow: calc(var(--size) * 0.07) calc(var(--size) * 0.1); 11 position: relative; 12 display: block; 13 width: var(--size); 14 height: var(--size); 15 margin: 0 auto; 16 background-color: #4158d0; 17 background-image: linear-gradient( 18 43deg, 19 #4158d0 0%, 20 #c850c0 46%, 21 #ffcc70 100% 22 ); 23 border-radius: 50%; 24 box-shadow: 0 var(--shadow) #ffbeb8; 25 cursor: pointer; 26 transition: 0.2s ease transform, 0.2s ease background-color, 27 0.2s ease box-shadow; 28 overflow: hidden; 29 z-index: 1; 30} 31.reject-checkbox .checkbox-wrapper label:before { 32 content: ""; 33 position: absolute; 34 top: 50%; 35 right: 0; 36 left: 0; 37 width: calc(var(--size) * 0.7); 38 height: calc(var(--size) * 0.7); 39 margin: 0 auto; 40 background-color: #fff; 41 transform: translateY(-50%); 42 border-radius: 50%; 43 box-shadow: inset 0 var(--shadow) #ffbeb8; 44 transition: 0.2s ease width, 0.2s ease height; 45} 46.reject-checkbox .checkbox-wrapper label:hover:before { 47 width: calc(var(--size) * 0.55); 48 height: calc(var(--size) * 0.55); 49 box-shadow: inset 0 var(--shadow) #ff9d96; 50} 51.reject-checkbox .checkbox-wrapper label:active { 52 transform: scale(0.9); 53} 54.reject-checkbox .checkbox-wrapper .tick_mark { 55 position: absolute; 56 top: 9px; 57 left: 2px; 58 right: 0; 59 width: calc(var(--size) * 0.6); 60 height: calc(var(--size) * 0.6); 61 margin: 0 auto; 62 margin-left: calc(var(--size) * 0.14); 63 transform: rotateZ(-92deg); 64} 65.reject-checkbox .checkbox-wrapper .tick_mark:before, 66.reject-checkbox .checkbox-wrapper .tick_mark:after { 67 content: ""; 68 position: absolute; 69 background-color: #fff; 70 border-radius: 2px; 71 opacity: 0; 72 transition: 0.2s ease transform, 0.2s ease opacity; 73} 74.reject-checkbox .checkbox-wrapper .tick_mark:before { 75 left: 0; 76 bottom: 0; 77 width: calc(var(--size) * 0.1); 78 height: calc(var(--size) * 0.3); 79 box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23); 80 transform: translateY(calc(var(--size) * -0.68)); 81} 82.reject-checkbox .checkbox-wrapper .tick_mark:after { 83 left: 0; 84 bottom: 0; 85 width: 100%; 86 height: calc(var(--size) * 0.1); 87 box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23); 88 transform: translateX(calc(var(--size) * 0.78)); 89} 90.reject-checkbox .checkbox-wrapper input[type="checkbox"]:checked + label { 91 background-color: #4158d0; 92 background-image: linear-gradient( 93 43deg, 94 #f7805c 0%, 95 #fb4545 46%, 96 #e1236a 100% 97 ); 98 box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, 99 rgba(0, 0, 0, 0.22) 0px 15px 12px; 100} 101.reject-checkbox 102 .checkbox-wrapper 103 input[type="checkbox"]:checked 104 + label:before { 105 width: 0; 106 height: 0; 107} 108 109.reject-checkbox 110 .checkbox-wrapper 111 input[type="checkbox"]:checked 112 + label 113 .tick_mark:before, 114.reject-checkbox 115 .checkbox-wrapper 116 input[type="checkbox"]:checked 117 + label 118 .tick_mark:after { 119 background-color: #fff; 120 width: calc(var(--size) * 0.4); 121 height: calc(var(--size) * 0.1); 122 left: 50%; 123 top: 50%; 124 transform: translate(-50%, -50%); 125 opacity: 1; 126} 127.reject-checkbox 128 .checkbox-wrapper 129 input[type="checkbox"]:checked 130 + label 131 .tick_mark:before { 132 transform: translate(-50%, -50%) rotate(45deg); 133} 134.reject-checkbox 135 .checkbox-wrapper 136 input[type="checkbox"]:checked 137 + label 138 .tick_mark:after { 139 transform: translate(-50%, -50%) rotate(-45deg); 140} 141
1.3K views
1.3K views
MIT License