Checkbox by ozgeozkaraa01
#e8e8e8
1.cbx { 2 position: relative; 3 top: 1px; 4 width: 27px; 5 height: 27px; 6 border: 1px solid #475569; 7 border-radius: 10px; 8 transition: background 0.2s ease; 9 cursor: pointer; 10 display: block; 11 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); 12} 13 14.cbx:after { 15 content: ''; 16 position: absolute; 17 top: 2px; 18 left: 8px; 19 width: 7px; 20 height: 14px; 21 opacity: 0; 22 transform: rotate(45deg) scale(0); 23 border-right: 2px solid #fff; 24 border-bottom: 2px solid #fff; 25 transition: all 0.3s ease; 26 transition-delay: 0.15s; 27} 28 29#cbx:checked ~ .cbx { 30 border-color: transparent; 31 background: #ec4899; 32 animation: jelly 0.4s ease; 33} 34 35#cbx:checked ~ .cbx:after { 36 opacity: 1; 37 transform: rotate(45deg) scale(1); 38} 39 40.cntr { 41 position: relative; 42} 43 44@keyframes jelly { 45 from { 46 transform: scale(1, 1); 47 } 48 49 20% { 50 transform: scale(1.3, 0.7); 51 } 52 53 40% { 54 transform: scale(0.7, 1.3); 55 } 56 57 60% { 58 transform: scale(1.1, 0.9); 59 } 60 61 80% { 62 transform: scale(0.9, 1.1); 63 } 64 65 to { 66 transform: scale(1, 1); 67 } 68} 69 70.hidden-xs-up { 71 display: none!important; 72} 73
694 views
694 views
MIT License