Button by ilkhoeri
#e8e8e8
1.action_has { 2 --color: 0 0% 60%; 3 --color-has: 211deg 100% 48%; 4 --sz: 1rem; 5 cursor: pointer; 6 display: flex; 7 align-items: center; 8 justify-content: center; 9 height: calc(var(--sz) * 2.5); 10 width: calc(var(--sz) * 2.5); 11 padding: 0.4rem 0.5rem; 12 border-radius: 0.375rem; 13 border: 0.0625rem solid hsl(var(--color)); 14} 15 16.has_liked svg, 17.has_saved svg { 18 overflow: visible; 19 height: calc(var(--sz) * 1.75); 20 width: calc(var(--sz) * 1.75); 21 --ease: cubic-bezier(0.5, 0, 0.25, 1); 22 --zoom-from: 1.75; 23 --zoom-via: 0.75; 24 --zoom-to: 1; 25 --duration: 1s; 26} 27 28.has_liked:hover { 29 transition: border-color var(--duration) var(--ease); 30 border-color: hsl(var(--color-has)); 31} 32 33.has_liked:hover svg, 34.has_saved:hover svg { 35 fill: hsl(var(--color-has) / 0.5); 36 color: hsl(var(--color-has)); 37} 38 39.has_liked:hover [data-d="thumb"] { 40 animation: has-liked-thumb var(--duration) var(--ease) forwards; 41} 42.has_liked:hover [data-d="sleeves"] { 43 animation: has-liked-sleeves var(--duration) var(--ease) forwards; 44} 45 46@keyframes has-liked-thumb { 47 33.333% { 48 transform: rotate(-20deg) translate(1px, 2px) scale(var(--zoom-from)); 49 } 50 66.666% { 51 transform: rotate(20deg) translate(2px, -2px) scale(var(--zoom-via)); 52 d: path( 53 "m8.05,11.99c0-.84.28-1.07,1.2-1.25,1.6-.31,2.3-.64,2.9-1.09,0,0,1.64-1.31,2.21-3.11,1.12-3.59,2.11-4.85,3.72-4.85,2.27,0,2.96,2.22,2.55,3.54-.6,1.97-3.81,4.09-3.94,4.99-.07.49.76.72,1.16.72h2.5c1.2,0,2.2,1,2.2,2.2l-1.1,5.6c-.3,1.5-1.02,2.23-2.2,2.2h-7.6c-2,0-3.6-1.6-3.6-3.6v-5.35Z" 54 ); 55 } 56 99.999% { 57 transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); 58 } 59} 60 61@keyframes has-liked-sleeves { 62 33.333% { 63 transform: rotate(10deg) translate(6px, -2px) scale(var(--zoom-from)); 64 } 65 66.666% { 66 transform: rotate(-10deg) translate(-6px, 0px) scale(var(--zoom-via)); 67 } 68 99.999% { 69 transform: rotate(0deg) translate(0px, 0px) scale(var(--zoom-to)); 70 } 71} 72
183 views
183 views
MIT License