Create button with hover effect like microsoft in HTML, CSS, and Javascript
Tags: html, css, javascript, incoder
Published: 2022-05-10 08:30:35

Hello friends, today in this blog, you will learn how to create a button with a hover effect like Microsoft. in HTML, CSS, and Javascript. In our previous blog, we saw [how to create a toast alert using HTML, CSS, and Javascript](https://incoderweb.blogspot.com/2022/05/restaurant-menu-with-filter-option.html). Earlier, I shared many projects related to [javascript](https://incoderweb.blogspot.com/search/label/Javascript), you can check if you want, and don't forget to check [HTML, CSS, and Javascript projects](https://incoderweb.blogspot.com/search/label/HTML%20CSS%20Javascript%20Mini%20Project).

You may have seen many kinds of button hover effects on the web, but today in this blog I will show you how to create a button hover effect like Microsoft. You can check the button hover effect [here](https://incoderweb.blogspot.com/2022/05/create-button-with-hover-effect-like-microsoft.html).

In this design [button with hover effect like microsoft], there is a button as you can see in the image above, with a blue background, when you hover on the button, then there will be a blur effect on the button according to your cursor position.

##You may like these:

- [Custom Select Input with search option](https://incoderweb.blogspot.com/2022/04/custom-select-input-with-search-option.html)
- [How to create text to speech converter](https://incoderweb.blogspot.com/2022/04/text-to-speech-converter.html)
- [Password strength checker](https://incoderweb.blogspot.com/2022/04/password-strength-checker.html)
- [Responsive Image Lightbox Design](https://incoderweb.blogspot.com/2022/04/responsive-image-lightbox-design.html)

The concept behind this hover effect, you need to get the X offset and Y offset when you hover in the button using Javascript. If you are feeling difficulty understanding what am I trying to say, So you can check the source code or preview it as well.

The Preview is available [here](https://incoderweb.blogspot.com/2022/05/create-button-with-hover-effect-like-microsoft.html?m=1).

##HTML Code
```
<!-- --------------------- 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>
```

##CSS Code
```
/* --------------------- 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;
}
```

##Javascript Code
```
// --------------------- 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')
})
```