Heart Toggle

rohit325
Feb 04, 2026 12
Live Preview

Live Editor

<button class="heart-btn" id="heartBtn">
<svg class="heart" viewBox="0 0 100 90">

  <!-- Shadow layer -->
  <path class="heart-shadow"
    d="M50 84
       C50 84 6 58 6 32
       C6 14 22 6 34 16
       C42 22 50 32 50 32
       C50 32 58 22 66 16
       C78 6 94 14 94 32
       C94 58 50 84 50 84Z"/>

  <!-- Base heart -->
  <path class="heart-base"
    d="M50 80
       C50 80 8 56 8 32
       C8 16 24 8 36 18
       C44 24 50 34 50 34
       C50 34 56 24 64 18
       C76 8 92 16 92 32
       C92 56 50 80 50 80Z"/>

  <!-- Highlight -->
  <path class="heart-highlight"
    d="M36 22
       C28 16 16 20 16 32
       C16 36 18 40 20 44
       C22 40 24 34 26 30
       C28 26 32 24 36 22Z"/>

</svg>
</button>
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f4f6;
}

/* Button */
.heart-btn{
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}

/* SVG wrapper */
.heart{
  width:90px;
  height:80px;
  transition: transform .25s ease;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.15));
}

.heart-btn:active .heart{
  transform: scale(0.9);
}

/* Base heart */
.heart-base{
  fill:#f6a5b6;
  transition: fill .3s ease;
}

/* 3D highlight */
.heart-highlight{
  fill:rgba(255,255,255,.45);
}

/* 3D shadow */
.heart-shadow{
  fill:rgba(0,0,0,.15);
}

/* Active state */
.heart-btn.active .heart-base{
  fill:#e63956;
}

/* Pop animation */
.heart-btn.active .heart{
  animation: pop .35s cubic-bezier(.2,.9,.3,1.4);
}

@keyframes pop{
  0%{transform:scale(0.8)}
  60%{transform:scale(1.15)}
  100%{transform:scale(1)}
}
document.getElementById('heartBtn').addEventListener('click', function(){
  this.classList.toggle('active');
});
Categories

Heart Toggle

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
