#e8e8e8
1label { 2 background-color: white; 3 display: flex; 4 align-items: center; 5 gap: 14px; 6 padding: 10px 15px 10px 10px; 7 cursor: pointer; 8 user-select: none; 9 border-radius: 10px; 10 box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; 11 color: black; 12} 13 14input { 15 display: none; 16} 17 18input:checked + label svg { 19 fill: hsl(0deg 100% 50%); 20 stroke: hsl(0deg 100% 50%); 21 animation: heartButton 1s; 22} 23 24@keyframes heartButton { 25 0% { 26 transform: scale(1); 27 } 28 29 25% { 30 transform: scale(1.3); 31 } 32 33 50% { 34 transform: scale(1); 35 } 36 37 75% { 38 transform: scale(1.3); 39 } 40 41 100% { 42 transform: scale(1); 43 } 44} 45 46input + label .action { 47 position: relative; 48 overflow: hidden; 49 display: grid; 50} 51 52input + label .action span { 53 grid-column-start: 1; 54 grid-column-end: 1; 55 grid-row-start: 1; 56 grid-row-end: 1; 57 transition: all .5s; 58} 59 60input + label .action span.option-1 { 61 transform: translate(0px,0%); 62 opacity: 1; 63} 64 65input:checked + label .action span.option-1 { 66 transform: translate(0px,-100%); 67 opacity: 0; 68} 69 70input + label .action span.option-2 { 71 transform: translate(0px,100%); 72 opacity: 0; 73} 74 75input:checked + label .action span.option-2 { 76 transform: translate(0px,0%); 77 opacity: 1; 78} 79
Comments
MIT License