SOURCE

/**
 * @author zhangxinxu(.com)
 * @description 点击页面任意位置，标记坐标位置
 */
let parentEl = document.querySelectorAll(".btn")

parentEl.forEach(item => {
    item.addEventListener('mousedown', function (event) {
        var target = event.target;
        var body = document.body;
        var html = document.documentElement;

        // 设置自定义属性值
        body.style.setProperty('--pagex', event.pageX+'px');
        body.style.setProperty('--pagey', event.pageY+'px');

        html.style.setProperty('--clientx', event.clientX+'px');
        html.style.setProperty('--clienty', event.clientY+'px');
        html.style.setProperty('--scrolly', window.pageYOffset+'px');

        target.style.setProperty('--offsetx', event.offsetX+'px');
        target.style.setProperty('--offsety', event.offsetY+'px');
        target.parentElement.style.setProperty('--target-width', target.clientWidth+'px');
        target.parentElement.style.setProperty('--target-height', target.clientHeight+'px');
        target.parentElement.style.setProperty('--target-left', target.offsetLeft+'px');
        target.parentElement.style.setProperty('--target-top', target.offsetTop+'px');
    })
})

<div class="btn-group">
    <button class="btn">button</button>
    <button class="btn">按钮</button>
    <button class="btn">确认</button>

</div>

button{
    box-shadow: none;
    border: none;
}
.btn-group{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.btn{
    position: relative;
    background-color: #37f;
    border-color: #37f;
    outline: 0;
    width: 82px;
    height: 40px;
    border-radius: 4px;
    padding: 0;
    user-select: none;
    cursor: unset;
    color: #fff;
    overflow: hidden;
}
.btn:not([disabled]):active::after {
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}
.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    left: var(--offsetx); top: var(--offsety);
    pointer-events: none;
    background: radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}