Magnetic Fill Button

1<template>
2  <button class="mag" @mouseenter="on=true" @mouseleave="on=false" :class="{on}">
3    <span>Kontakt aufnehmen</span>
4  </button>
5</template>
6<script>
7export default { data: () => ({ on: false }) }
8</script>
9<style>
10.mag{position:relative;overflow:hidden;padding:14px 30px;border:1px solid rgba(167,139,250,.5);border-radius:14px;
11  background:transparent;color:#c4b5fd;font:600 15px system-ui;cursor:pointer;transition:color .3s}
12.mag.on{color:#fff}
13.mag::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#8b5cf6,#06b6d4);
14  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:0}
15.mag.on::before{transform:scaleX(1)}
16.mag span{position:relative;z-index:1}
17</style>