一個不能讓產品經理和UI看到的按鈕設計

時間 2019-11-25

標籤一個不能產品經理看到按鈕設計简体版

原文原文鏈接

源代碼：javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .button {
            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::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>
</head>

<body>
    <div class="box">
        <button class="button"><span>hover me hover hover</span></button>
    </div>
    <script type="text/javascript">
        /*獲取到鼠標的位置*/
        document.querySelector('.button').onmousemove = (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>
</body>

</html>

相關標籤/搜索