Like Pulse Button

1<template>
2  <button class="like" :class="{on:liked}" @click="liked=!liked" :aria-pressed="liked">
3    <svg width="20" height="20" viewBox="0 0 24 24" :fill="liked?'#f43f5e':'none'" stroke="currentColor" stroke-width="2">
4      <path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/>
5    </svg>
6    <span>{{ liked ? 'Gefällt dir' : 'Gefällt mir' }}</span>
7  </button>
8</template>
9<script>
10export default { data: () => ({ liked: false }) }
11</script>
12<style>
13.like{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border:1px solid rgba(255,255,255,.12);
14  border-radius:14px;background:rgba(255,255,255,.04);color:#e8e8f0;font:600 14px system-ui;cursor:pointer;transition:.25s}
15.like.on{border-color:rgba(244,63,94,.5);color:#fda4af;background:rgba(244,63,94,.08)}
16.like.on svg{animation:pop .4s ease}
17@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
18</style>