How Make Add To Favourite Button Only Css

on

Video Is Also There After The Html Code Below

Css Codes
body{
 margin: 0;
 padding: 0;
 background: linear-gradient(to right,#36d1dc, #5b86e5);
 font-family: sans-serif;
}
input[type="checkbox"]{
 height: 0;
 width: 0;
 visibility: hidden;
}
label{
 width: 50px;
 height: 50px;
 border: 2px solid #f00;
 border-radius: 50px;
 background: linear-gradient(to right,#5b86f5,#36f5dc);
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 transition: 0.6s all;
 font-size: 25px;
 overflow: hidden;
}
label:hover{
 cursor: pointer;
 width: 170px;
}
span{
 left: 25%;
 top: 20%;
 opacity: 0;
 transition: 0.6s all;
 position: relative;
}
.fas{
 transform: translate(50%,50%);
 color: rgba(255,0,0,.9);
 transition: 0.6s all;
}
input:checked + label{
 border: 2px solid #38fcff;
 background: linear-gradient(to right,#5b86f5,#36f5dc);
 transition: 0.6s all;
 width: 50px;
}
input:checked + label span {
 display: none;
}
input:checked + label heart{
 opacity: 0;
 transition: 0.6s all;
}
label:hover > span{
 opacity: 1;
 color: #f00;
 position: absolute;
}
sync,check{
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
 opacity: 0;
}
input:checked + label sync{
 animation-name: syncing;
 animation-duration: 2s;
 animation-delay: 0.2s;
 animation-iteration-count: 1;

}
@keyframes syncing{
 from{
  opacity: 1;
 }
 to{
  opacity: 0;
 }
}
input:checked + label check{
 animation-name: checking;
 animation-duration: 1s;
 animation-iteration-count: 1;
 animation-delay: 2s;
 animation-fill-mode: forwards;
 transform: translate(-100%,-90%);
 font-size: 50px;
}
@keyframes checking{
 from{
  opacity: 0;
 }
 to{
  opacity: 1;
 }
}
input:active + label{
 height: 0;
}
Html Codes

Comments

Post a Comment