How to Create a Hover Button with a Glowing Shadow Effect Using CSS, HTML

In this video, you are going to learn how to create a hover button with a glowing shadow effect. it is very simple to design and I think it will helpful for you when you design attractive buttons. This shadow effect will work when you hover the cursor on the button. Let’s see how to create this hover button with a glowing shadow effect.

Subscribe: https://www.youtube.com/channel/UCNDmzGYwwT3rdY3xQuW8QOA

Source code

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>

        <title>Glow Shadow Hover Button</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <a href="#" class="btn">Button</a>

    </body>
</html>

style.css


body{
    margin: 0;
    padding: 0;
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
}
/*button css*/
.btn{
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: bold;
    background: #1E90FF;
    width: 160px;
    padding: 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
}
.btn:hover, .btn:focus, .btn:active{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

#css #html