<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft Button Design clone - InCoder</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="btnContainer">
        <div class="blur"></div>
        <button class="inBtn">Submit</button>
    </div>

    <script src="script.js"></script>
</body>
</html>
/* --------------------- Created By InCoder --------------------- */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: #393536;
}

.btnContainer{
    --x: 0%;
    --y: 0%;
    width: 10rem;
    height: 3rem;
    overflow: hidden;
    position: relative;
    border-radius: .5rem;
    background-color: red;
}

.btnContainer::before{
    content: '';
    opacity: 0;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    position: absolute;
    filter: blur(1rem);
    transition: all .1s linear;
    top: calc(var(--y) - 1rem);
    left: calc(var(--x) - 1.2rem);
    background: radial-gradient(white, #3984ff00 80%);
    box-shadow: 0 0 20px rgb(255 255 255 / 20%);
}

.btnContainer:hover::before {
    opacity: 1;
}

.inBtn{
    border: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    background-color: #4b91d7;
}
// --------------------- Created By InCoder ---------------------

let inBtn = document.querySelector('.btnContainer .inBtn')
btnContainer = document.querySelector('.btnContainer')

inBtn.addEventListener('mousemove', e => {
    btnContainer.style.setProperty('--x', `${e.offsetX}px`)
    btnContainer.style.setProperty('--y', `${e.offsetY}px`)
    btnContainer.classList.add('active')
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.