Checkbox by elijahgummer
#e8e8e8
1.checkbox { 2 position: relative; 3} 4 5.checkbox input[type="checkbox"] { 6 display: none; 7 visibility: hidden; 8} 9 10.checkbox .cbx { 11 -webkit-perspective: 20; 12 perspective: 20; 13 display: inline-block; 14 border: 2px solid #e8e8eb; 15 background: #e8e8eb; 16 border-radius: 4px; 17 transform: translate3d(0, 0, 0); 18 cursor: pointer; 19 transition: all 0.3s ease; 20} 21 22.checkbox .cbx:hover { 23 border-color: #0b76ef; 24} 25 26.checkbox .flip { 27 display: block; 28 transition: all 0.4s ease; 29 transform-style: preserve-3d; 30 position: relative; 31 width: 20px; 32 height: 20px; 33} 34 35.checkbox input[type="checkbox"]:checked + .cbx { 36 border-color: #0b76ef; 37} 38 39.checkbox input[type="checkbox"]:checked + .cbx .flip { 40 transform: rotateY(180deg); 41} 42 43.checkbox .front, 44.checkbox .back { 45 backface-visibility: hidden; 46 position: absolute; 47 top: 0; 48 left: 0; 49 width: 20px; 50 height: 20px; 51 border-radius: 2px; 52} 53 54.checkbox .front { 55 background: #fff; 56 z-index: 1; 57} 58 59.checkbox .back { 60 transform: rotateY(180deg); 61 background: #0b76ef; 62 text-align: center; 63 color: #fff; 64 line-height: 20px; 65 box-shadow: 0 0 0 1px #0b76ef; 66} 67 68.checkbox .back svg { 69 margin-top: 3px; 70 fill: none; 71} 72 73.checkbox .back svg path { 74 stroke: #fff; 75 stroke-width: 2.5; 76 stroke-linecap: round; 77 stroke-linejoin: round; 78} 79
326 views
326 views
MIT License