DEV Community

Cover image for Create button with hover effect like microsoft in HTML, CSS, and Javascript
Ashutosh Tiwari
Ashutosh Tiwari

Posted on • Originally published at


Create button with hover effect like microsoft in HTML, CSS, and Javascript

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. Earlier, I shared many projects related to javascript, you can check if you want, and don't forget to check HTML, CSS, and Javascript projects.

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.

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:

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.


<!-- --------------------- Created By InCoder --------------------- -->
<!DOCTYPE html>
<html lang="en">
    <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">
    <div class="btnContainer">
        <div class="blur"></div>
        <button class="inBtn">Submit</button>

    <script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode

CSS Code

/* --------------------- Created By InCoder --------------------- */

@import url(',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;

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

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

    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;

    border: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    cursor: pointer;
    font-size: 1.1rem;
    background-color: #4b91d7;
Enter fullscreen mode Exit fullscreen mode

Javascript Code

// --------------------- Created By InCoder ---------------------

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

inBtn.addEventListener('mousemove', e => {'--x', `${e.offsetX}px`)'--y', `${e.offsetY}px`)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!