3.2K views
CSSAdd prefixes
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
HTML
1<input type="checkbox" checked="checked" id="favorite" name="favorite-checkbox" value="favorite-button"> 2<label for="favorite" class="container"> 3 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> 4 <div class="action"> 5 <span class="option-1">Add to Favorites</span> 6 <span class="option-2">Added to Favorites</span> 7 </div> 8</label>