Button Hover Effect With CSS

 Button Hover Effect:-

Code:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-family:sans-serif;
        }
        body{
            display:flex ;
            justify-content:center;
            align-items:center;
            min-height:100vh;
            background:#f2f3f7;
        }
        a{
            position: relative;
            display:inline-block;
            padding:10px 30px;
            text-decoration:none;
            text-transform: uppercase;
            font-weight: 500;
            letter-spacing:2px;
            color:#5a84a2;
            font-size: 18px;
            border-radius: 40px;
            box-shadow:-2px -2px 8px rgba(255,255,255,1),
                        -2px -2px 12px rgba(255,255,255,0.5),
                        inset 2px 2px 4px rgba(255,255,255,0.1),
                        2px 2px 8px rgba(0,0,0,0.15);
        }
        a:hover{
            box-shadow:inset -2px -2px 8px rgba(255,255,255,1),
                        inset -2px -2px 12px rgba(255,255,255,0.5),
                        inset 2px 2px 4px rgba(255,255,255,0.1),
                        inset 2px 2px 8px rgba(0,0,0,0.15);
        }
        a:hover span {
            display: inline-block;
            transform: scale(.98);
        }
    </style>
</head>
<body>
    <a href="#"><span>Button</span></a>
</body>
</html>


Output:-


Comments

Post a Comment

Please do not enter any spam link in the comment box.

Popular Posts