超炫的按钮

代码

css:

<style>
    .button-css{
        margin:200px 500px;
        width: 400px;
        position: relative;
        appearance: none;
        background: #f72359;
        padding: 1em 2em;
        border: none;
        color: white;
        font-size: 1.2em;
        cursor: pointer;
        outline: none;
        overflow: hidden;
        border-radius: 100px;
    }
    span {
        position: relative;
    }
    .button-css::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;
    }
    :hover::before {
        --size: 400px;
    }

</style>

html:

<button class="button-css"><span>Hover me</span></button>

script:

<script>
    $(function () {
        $(".button-css").mousemove(function(e){
            const x = e.pageX - e.target.offsetLeft;
            const y = e.pageY - e.target.offsetTop;
            e.target.style.setProperty('--x', `${ x }px`);
            e.target.style.setProperty('--y', `${ y }px`);
        });
    })
</script>

效果图：