How to Create Hover Effect Button using HTML CSS

In this video, I have created a Button with a Hover effect. The hover effect is an effect when the mouse cursor is on the button. This type of effect is usually used to show highlight and engage the user to click that button, also it's a user-friendly type of button.

Video

Code

<!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>Hover Button using HTML CSS</title>
</head>
<body>
    <style>
        button{
            margin: 25px;
        }
        .btn{
            width: 150px;
            height: 40px;
            color: #fff;
            border-radius: 5px;
            padding:  10px 25px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: inset 2px 2px 2px 2px rgba(255, 255, 255, .5),
            7px 7px 20px 0px rgba(0 ,0,0,.1),
            4px 4px 5px 0px rgba(0,0,0,.1);
            background: blue;
            border: none;
        }
        .btn a{
            color: white;
            text-decoration: none;    
        }
         .btn:hover{
             background-color: rgb(23, 23, 95);
         }
    </style>
    <button class="btn"><a href="https://smashershub.in"> Hover Button </a></button>
</body>
</html>

View Sitemaps

See Also :