Vue Ripple Button

1<template>
2  <button class="ripple-btn" @click="addRipple">
3    Klick mich
4    <span
5      v-for="r in ripples"
6      :key="r.id"
7      class="ripple"
8      :style="{ left: r.x + 'px', top: r.y + 'px' }"
9    ></span>
10  </button>
11</template>
12
13<script>
14export default {
15  data: () => ({ ripples: [], nextId: 0 }),
16  methods: {
17    addRipple(e) {
18      const rect = e.currentTarget.getBoundingClientRect();
19      const id = this.nextId++;
20      this.ripples.push({ id, x: e.clientX - rect.left, y: e.clientY - rect.top });
21      setTimeout(() => {
22        this.ripples = this.ripples.filter((r) => r.id !== id);
23      }, 650);
24    },
25  },
26};
27</script>
28
29<style>
30.ripple-btn {
31  position: relative;
32  overflow: hidden;
33  padding: 14px 34px;
34  border: 0;
35  border-radius: 14px;
36  cursor: pointer;
37  background: linear-gradient(120deg, #8b5cf6, #d946ef);
38  color: #fff;
39  font: 600 16px system-ui, sans-serif;
40}
41.ripple-btn:focus-visible {
42  outline: 2px solid #c4b5fd;
43  outline-offset: 3px;
44}
45.ripple {
46  position: absolute;
47  width: 12px;
48  height: 12px;
49  border-radius: 50%;
50  background: rgba(255, 255, 255, 0.5);
51  transform: translate(-50%, -50%) scale(0);
52  animation: rip 0.65s ease-out forwards;
53  pointer-events: none;
54}
55@keyframes rip {
56  to { transform: translate(-50%, -50%) scale(22); opacity: 0; }
57}
58@media (prefers-reduced-motion: reduce) {
59  .ripple { animation: none; opacity: 0; }
60}
61</style>