Fri Aug 04 2023

Simple Button Hover Animation

CSS93 views
Simple Button Hover Animation

File Name: simple-button-hover-effect.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">    
    <title>Simple Button Hover Effect</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: 'Roboto', sans-serif;
        }

        body {
            background-color: #292929;
        }

        section {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .btn {
            border: none;
            padding: 8px 25px;
            font-size: 20px;
            border-radius: 2px;
            cursor: pointer;
            background-color: #ffeadd;
            color: #ff6666;
            box-shadow: 0 5px 8px 2px #1b1b1b;
            transition: 0.3s all ease-in-out;
            transition: 0.5s box-shadow ease-in-out;
        }

        .btn:hover {
            background-color: #ff6666;
            color: #ffeadd;
            box-shadow: 0 0 12px 2px #ffeadd;
        }

        
    </style>
</head>
<body>
    <section>
        <button type="button" class="btn">Hover Me</button>
    </section>
</body>
</html>

Result Screenshot(s)

Simple Button Hover AnimationWorking Sample0

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.