按钮特效

背景变色

hover me to change

详细代码

<script setup>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties

const handle = (e) => {
    const x = e.pageX - _this.offsetLeft
    const y = e.pageY - _this.offsetTop

    _this.style.setProperty('--x', `${x}px`)
    _this.style.setProperty('--y', `${y}px`)
}
</script>

<template>
    <div class="button" @mousemove="handle">
        <span>hover me to change</span>
    </div>
</template>

<style scoped lang="scss">
.button {
    margin: 40px auto;
    width: 250px;
    height: 60px;
    padding: 0 30px;
    line-height: 60px;
    text-align: center;
    position: relative;
    appearance: none;
    background: #f72359;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 100px;
}

.button span {
    position: relative;
}

.button::before {
    --size: 0;
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
}

.button:hover::before {
    --size: 400px;
}
</style>

hover me to change

详细代码

<template>
    <div class="btn-container">
        <div class="button">
            <div class="button__content">hover me to change</div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.btn-container {
    padding: 10px;

    .button {
        width: 200px;
        height: 60px;
        position: relative;
        background: transparent;
        margin: 30px auto;
        box-sizing: border-box;
        cursor: pointer;
        text-align: center;
        line-height: 60px;

        &::before {
            content: '';
            width: 0;
            height: 0;
            background: #00adb5;
            position: absolute;
            top: -1px;
            right: -1px;
            z-index: 0;
            transition: width .5s, height .5s;
        }

        &::after {
            content: '';
            width: 0;
            height: 0;
            background: #00adb5;
            position: absolute;
            bottom: -1px;
            left: -1px;
            z-index: 0;
            transition: width .5s, height .5s;
        }

        &:hover::before {
            width: calc(100% + 2px);
            height: calc(100% + 2px);
        }

        &:hover::after {
            width: calc(100% + 2px);
            height: calc(100% + 2px);
        }

        .button__content {
            height: 100%;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            background: transparent;
        }
    }
}</style>