470 views
1/* Hide the default checkbox */ 2.container input { 3 opacity: 0; 4 cursor: pointer; 5 height: 0; 6 width: 0; 7} 8 9.container { 10 display: block; 11 position: relative; 12 cursor: pointer; 13 font-size: 20px; 14 user-select: none; 15} 16 17/* Create a custom checkbox */ 18.checkmark { 19 position: relative; 20 top: 0; 21 left: 0; 22 height: 3em; 23 width: 3em; 24 background-color: #171717; 25 border-radius: 10px; 26 transition: .2s ease-in-out; 27 z-index: 2; 28} 29 30.like { 31 position: relative; 32 font-size: 0.8em; 33 top: -3.5em; 34 text-align: center; 35 z-index: -1; 36} 37 38.icon { 39 margin: 0.2em; 40 fill: white; 41 transition: .4s ease-in-out; 42} 43 44.checkmark:hover { 45 background-color: white; 46} 47 48.checkmark:hover .icon { 49 fill: black; 50 transform: rotate(-8deg); 51 transform-origin: bottom left; 52} 53 54/* When the checkbox is checked, add a blue background */ 55.container input:checked ~ .checkmark { 56 background-color: limegreen; 57} 58 59.container input:checked ~ .like { 60 animation: 0.6s up_3951; 61} 62 63.container input:checked ~ .checkmark .icon { 64 fill: white; 65 transform: none; 66 animation: 0.5s jump_3951; 67} 68 69/* Create the checkmark/indicator (hidden when not checked) */ 70.checkmark:after { 71 content: ""; 72 position: absolute; 73 display: none; 74} 75 76/* Show the checkmark when checked */ 77.container input:checked ~ .checkmark:after { 78 display: block; 79} 80 81@keyframes up_3951 { 82 100% { 83 transform: translateY(-2em); 84 } 85} 86 87@keyframes jump_3951 { 88 50% { 89 transform-origin: center; 90 transform: translateY(-0.5em) rotate(-8deg); 91 } 92 93 100% { 94 transform-origin: center; 95 transform: translateY(0em); 96 } 97}
Praashoo7
Prashant
MIT License