#212121
1.ui-like { 2 --icon-size: 24px; 3 --icon-secondary-color: rgb(255, 255, 255); 4 --icon-hover-color: rgb(211, 205, 205); 5 --icon-primary-color: rgb(230, 26, 26); 6 --icon-circle-border: 1px solid var(--icon-primary-color); 7 --icon-circle-size: 35px; 8 --icon-anmt-duration: 0.3s; 9} 10 11.ui-like input { 12 -webkit-appearance: none; 13 -moz-appearance: none; 14 appearance: none; 15 display: none; 16} 17 18.ui-like .like { 19 width: var(--icon-size); 20 height: auto; 21 fill: var(--icon-secondary-color); 22 cursor: pointer; 23 -webkit-transition: 0.2s; 24 -o-transition: 0.2s; 25 transition: 0.2s; 26 display: -webkit-box; 27 display: -ms-flexbox; 28 display: flex; 29 -webkit-box-pack: center; 30 -ms-flex-pack: center; 31 justify-content: center; 32 -webkit-box-align: center; 33 -ms-flex-align: center; 34 align-items: center; 35 position: relative; 36 -webkit-transform-origin: top; 37 -ms-transform-origin: top; 38 transform-origin: top; 39} 40 41.like::after { 42 content: ""; 43 position: absolute; 44 width: 10px; 45 height: 10px; 46 -webkit-box-shadow: 0 30px 0 -4px var(--icon-primary-color), 47 30px 0 0 -4px var(--icon-primary-color), 48 0 -30px 0 -4px var(--icon-primary-color), 49 -30px 0 0 -4px var(--icon-primary-color), 50 -22px 22px 0 -4px var(--icon-primary-color), 51 -22px -22px 0 -4px var(--icon-primary-color), 52 22px -22px 0 -4px var(--icon-primary-color), 53 22px 22px 0 -4px var(--icon-primary-color); 54 box-shadow: 0 30px 0 -4px var(--icon-primary-color), 55 30px 0 0 -4px var(--icon-primary-color), 56 0 -30px 0 -4px var(--icon-primary-color), 57 -30px 0 0 -4px var(--icon-primary-color), 58 -22px 22px 0 -4px var(--icon-primary-color), 59 -22px -22px 0 -4px var(--icon-primary-color), 60 22px -22px 0 -4px var(--icon-primary-color), 61 22px 22px 0 -4px var(--icon-primary-color); 62 border-radius: 50%; 63 -webkit-transform: scale(0); 64 -ms-transform: scale(0); 65 transform: scale(0); 66} 67 68.like::before { 69 content: ""; 70 position: absolute; 71 border-radius: 50%; 72 border: var(--icon-circle-border); 73 opacity: 0; 74} 75 76/* actions */ 77 78.ui-like:hover .like { 79 fill: var(--icon-hover-color); 80} 81 82.ui-like input:checked + .like::after { 83 -webkit-animation: circles var(--icon-anmt-duration) 84 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 85 animation: circles var(--icon-anmt-duration) 86 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 87 -webkit-animation-delay: var(--icon-anmt-duration); 88 animation-delay: var(--icon-anmt-duration); 89} 90 91.ui-like input:checked + .like { 92 fill: var(--icon-primary-color); 93 -webkit-animation: like var(--icon-anmt-duration) forwards; 94 animation: like var(--icon-anmt-duration) forwards; 95 -webkit-transition-delay: 0.3s; 96 -o-transition-delay: 0.3s; 97 transition-delay: 0.3s; 98} 99 100.ui-like input:checked + .like::before { 101 -webkit-animation: circle var(--icon-anmt-duration) 102 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 103 animation: circle var(--icon-anmt-duration) 104 cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 105 -webkit-animation-delay: var(--icon-anmt-duration); 106 animation-delay: var(--icon-anmt-duration); 107} 108 109@-webkit-keyframes like { 110 50% { 111 -webkit-transform: scaleY(0.6); 112 transform: scaleY(0.6); 113 } 114 115 100% { 116 -webkit-transform: scaleY(1); 117 transform: scaleY(1); 118 } 119} 120 121@keyframes like { 122 50% { 123 -webkit-transform: scaleY(0.6); 124 transform: scaleY(0.6); 125 } 126 127 100% { 128 -webkit-transform: scaleY(1); 129 transform: scaleY(1); 130 } 131} 132 133@-webkit-keyframes circle { 134 from { 135 width: 0; 136 height: 0; 137 opacity: 0; 138 } 139 140 90% { 141 width: var(--icon-circle-size); 142 height: var(--icon-circle-size); 143 opacity: 1; 144 } 145 146 to { 147 opacity: 0; 148 } 149} 150 151@keyframes circle { 152 from { 153 width: 0; 154 height: 0; 155 opacity: 0; 156 } 157 158 90% { 159 width: var(--icon-circle-size); 160 height: var(--icon-circle-size); 161 opacity: 1; 162 } 163 164 to { 165 opacity: 0; 166 } 167} 168 169@-webkit-keyframes circles { 170 from { 171 -webkit-transform: scale(0); 172 transform: scale(0); 173 } 174 175 40% { 176 opacity: 1; 177 } 178 179 to { 180 -webkit-transform: scale(0.8); 181 transform: scale(0.8); 182 opacity: 0; 183 } 184} 185 186@keyframes circles { 187 from { 188 -webkit-transform: scale(0); 189 transform: scale(0); 190 } 191 192 40% { 193 opacity: 1; 194 } 195 196 to { 197 -webkit-transform: scale(0.8); 198 transform: scale(0.8); 199 opacity: 0; 200 } 201}
Comments
MIT License