Checkbox by aurellsoleil
#212121
1.checkbox-wrapper-4 * { 2 box-sizing: border-box; 3 color: white; 4} 5 6.checkbox-wrapper-4 .cbx { 7 -webkit-user-select: none; 8 user-select: none; 9 cursor: pointer; 10 padding: 6px 8px; 11 border-radius: 6px; 12 overflow: hidden; 13 transition: all 0.2s ease; 14 display: inline-block; 15} 16 17.checkbox-wrapper-4 .cbx:not(:last-child) { 18 margin-right: 6px; 19} 20 21.checkbox-wrapper-4 .cbx:hover { 22 background: linear-gradient( 23 90deg, 24 rgba(230, 120, 2, 1) 0%, 25 rgba(126, 28, 145, 1) 100% 26 ); 27} 28 29.cbx:not(:hover) span svg { 30 color: red; 31 stroke: red; 32} 33 34.checkbox-wrapper-4 .cbx span { 35 float: left; 36 vertical-align: middle; 37 transform: translate3d(0, 0, 0); 38} 39 40.checkbox-wrapper-4 .cbx span:first-child { 41 position: relative; 42 width: 18px; 43 height: 18px; 44 border-radius: 4px; 45 transform: scale(1); 46 border: 1px solid #cccfdb; 47 transition: all 0.2s ease; 48 box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05); 49} 50 51.checkbox-wrapper-4 .cbx span:first-child svg { 52 position: absolute; 53 top: 3px; 54 left: 2px; 55 fill: none; 56 stroke: #fff; 57 stroke-width: 2; 58 stroke-linecap: round; 59 stroke-linejoin: round; 60 stroke-dasharray: 16px; 61 stroke-dashoffset: 16px; 62 transition: all 0.3s ease; 63 transition-delay: 0.1s; 64 transform: translate3d(0, 0, 0); 65} 66 67.checkbox-wrapper-4 .cbx span:last-child { 68 padding-left: 8px; 69 line-height: 18px; 70} 71 72.checkbox-wrapper-4 .cbx:hover span:first-child { 73 border-color: #fff; 74} 75 76.checkbox-wrapper-4 .inp-cbx { 77 position: absolute; 78 visibility: hidden; 79} 80 81.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child { 82 background: #fff; 83 border-color: #fff; 84 transition: rotate 2s; 85 transform: rotateZ(45deg); 86 animation: wave-4 0.6s ease; 87} 88 89.checkbox-wrapper-4 .inp-cbx:checked + .cbx:not(:hover) span:first-child { 90 background: linear-gradient( 91 90deg, 92 rgba(230, 120, 2, 1) 0%, 93 rgba(126, 28, 145, 1) 100% 94 ); 95 border-color: linear-gradient( 96 90deg, 97 rgba(230, 120, 2, 1) 0%, 98 rgba(126, 28, 145, 1) 100% 99 ); 100} 101 102.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg { 103 stroke-dashoffset: 0; 104} 105 106.checkbox-wrapper-4 .inline-svg { 107 position: absolute; 108 width: 0; 109 height: 0; 110 pointer-events: none; 111 user-select: none; 112} 113 114@media screen and (max-width: 640px) { 115 .checkbox-wrapper-4 .cbx { 116 width: 100%; 117 display: inline-block; 118 } 119} 120 121@-moz-keyframes wave-4 { 122 33% { 123 transform: scale(1.3); 124 } 125 66% { 126 transform: scale(0.8); 127 } 128} 129 130@-webkit-keyframes wave-4 { 131 33% { 132 transform: scale(1.3); 133 } 134 66% { 135 transform: scale(0.8); 136 } 137} 138 139@-o-keyframes wave-4 { 140 33% { 141 transform: scale(1.3); 142 } 143 66% { 144 transform: scale(0.8); 145 } 146} 147 148@keyframes wave-4 { 149 33% { 150 transform: scale(1.3); 151 } 152 66% { 153 transform: scale(0.8); 154 } 155} 156
62 views
Variation of acheckbox
MIT License