一个炫酷的按钮

<div class="button">
    <span>鼠标移过来试试</span>
</div>

写出来的效果是这样的：

640.gif

直接上css和js啦

<style>
        .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;
        }
        .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>


<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>

样式中涉及的css变量正在大量普及，js的es6写法也值得学习。
本文借鉴：https://mp.weixin.qq.com/s/0uNQxcEG6m1LQrzUlVLW3A?tdsourcetag=s_pcqq_aiomsg