![](/build/_assets/logo-png-XGWSYHKJ.png)
Checkbox by SalladShooter
#212121
1.like-wrapper { 2 --gap: 0.5em; 3 --radius: 0.35em; 4 display: flex; 5 align-items: center; 6 text-align: center; 7 justify-content: center; 8 --dot-bg: #212121; 9 --dot-color: #313131; 10 --dot-size: 1px; 11 --dot-space: 22px; 12 background: linear-gradient( 13 90deg, 14 var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), 15 transparent 1% 16 ) 17 center / var(--dot-space) var(--dot-space), 18 linear-gradient( 19 var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), 20 transparent 1% 21 ) 22 center / var(--dot-space) var(--dot-space), 23 var(--dot-color); 24 border: 0.1em solid #313131; 25 padding: 0.5em; 26 border-radius: var(--radius); 27 box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1); 28 cursor: pointer; 29} 30 31.check[type="checkbox"] { 32 display: none; 33} 34 35.container { 36 display: flex; 37 align-items: center; 38 cursor: pointer; 39 margin-top: -0.25em; 40 margin-bottom: -0.25em; 41} 42 43.icon { 44 width: 1.5em; 45 height: 1.5em; 46 margin-left: 0.5em; 47 fill: white; 48 transition: opacity 0.3s ease-in-out; 49} 50 51.icon.active { 52 display: none; 53 fill: #f52121; 54} 55 56.check[type="checkbox"]:checked + .container .icon.active { 57 display: inline-block; 58 animation: wiggle 0.5s ease-in-out; 59} 60 61.check[type="checkbox"]:checked + .container .icon.inactive { 62 display: none; 63} 64 65.like-text { 66 margin-left: 0.5em; 67 padding: 0.5em; 68 color: white; 69 font-family: Arial, sans-serif; 70 font-weight: bolder; 71} 72 73@keyframes wiggle { 74 0%, 75 100% { 76 transform: rotate(0deg); 77 } 78 25% { 79 transform: rotate(-10deg); 80 } 81 50% { 82 transform: rotate(10deg); 83 } 84 75% { 85 transform: rotate(-10deg); 86 } 87} 88
282 views
282 views
MIT License