Description:-

Hello everyone! In this video, you are going to learn "How to create 'Add To Favorites Button Hover Effect - Using HTML & CSS" .

Let's see!

First, try it by following the video tutorial !

Result -

Add To Favorites Button Hover Effect

Source code:-

Add To Favorites Button Hover Effect

HTML

CSS

* {
        margin: 0;
        padding: 0;
}

.parent {
        background-color: aqua;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
}

label {
        width: 250px;
        background-color: white;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
         -ms-flex-align: center;
           align-items: center;
           gap: 14px;
           padding: 10px 15px 10px 10px;
           cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select:none;
        user-select: none;
        border-radius: 10px;
        -webkit-box-shadow:rgba(149, 157, 165, 0.2) 0px 8px 24px ;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
          color: black; 
         }

input {
        display: none;
}

input:checked + label svg {
        fill: hsl(0deg 100% 50%);
        stroke: hsl(0deg 100% 50%);
        -webkit-animation:heartButton 1s; 
              animation: heartButton 1s;

}

@-webkit-keyframes heartButton {
        0% {
                -webkit-transform: scale(1);
                transform: scale(1);
        }

25% {
             -webkit-transform: scale(1.3);
               transform: scale(1.3);
        }

50% {
                -webkit-transform: scale(1);
                transform: scale(1);
        }

75% {
                -webkit-transform: scale(1.3);
                  transform: scale(1.3);
        }

100% {
                -webkit-transform: scale(1);
                transform: scale(1);
        }
}

@keyframes heartButton {
        0% {
                -webkit-transform: scale(1);
                transform: scale(1);
        }

25% {
                -webkit-transform: scale(1.3);
                transform: scale(1.3);
        }

50% {
                -webkit-transform: scale(1);
                  transform: scale(1);
        }

75% {
                -webkit-transform: scale(1.3);
                transform: scale(1.3);
        }

100% {
                -webkit-transform: scale(1);
                transform: scale(1);
        }
}

input + label .action {
        position: relative;
        overflow: hidden;
        display: grid;
}

input + label .action span {
        grid-column-start: 1;
        grid-column-end: 1;
        grid-row-start: 1;
        grid-row-end: 1;
        -webkit-transition: all .5s;
        transition: all .5s;
}

input + label .action span.option-1 {
        -webkit-transform: translate(0px,0%);
           -ms-transform: translate(0px,0%);
             transform: translate(0px,0%);
    opacity: 1;         
}

input + label .action span.option-2 {
        -webkit-transform: translate(0px,100%);
           -ms-transform: translate(0px,100%);
             transform: translate(0px,100%);
    opacity: 0;         
}

input:checked + label .action span.option-1 {
        -webkit-transform: translate(0px,-100%);
          -ms-transform: translate(0px,-100%);
          transform: translate(0px,-100%);
          opacity: 0;
}

input:checked + label .action span.option-2 {
        -webkit-transform: translate(0px,100%);
          -ms-transform: translate(0px,100%);
          transform: translate(0px,100%);
          opacity: 0;
}

input:checked + label .action span.option-2 {
        -webkit-transform: translate(0px,0%);
        -ms-transform: translate(0px,0%);
          transform: translate(0px,0%);
      opacity: 1;    
}

Result -
Add To Favorites Button Hover Effect

.