DEV Community

Cover image for Awesome Button Hover Effects Using Pure HTML & CSS
Technical Vandar
Technical Vandar

Posted on

Awesome Button Hover Effects Using Pure HTML & CSS

Source Code:

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <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>Button With Awesome Hover Effect</title>
</head>
<body>
    <div class="container">
        <button>Hover Me</button>
        <button>Hover Me</button>
        <button>Hover Me</button>
        <button>Hover Me</button>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS CODE:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
.container{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
button{
    height: 50px;
    width: 150px;
    margin: 15px;
    font-size: 25px;
    font-weight: 550;
    font-family: sans-serif;
    background: none;
    outline: none;
    color: #0e95BF;
    border: 2px solid #0e95BF;
    cursor: pointer;
    transition: 0.5s ease-in all;
}
button:nth-child(1):hover{
    box-shadow: inset 0 60px 0 0 #0e95BF;
    color: white;
}
button:nth-child(2):hover{
    box-shadow: inset 80px 50px #0e95BF;
    color: white;
}
button:nth-child(3):hover{
    box-shadow: inset 0 0 0 40px #0e95BF;
    color: white;
}
button:nth-child(4):hover{
    box-shadow: inset 150px 0 0 0 #0e95BF;
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

Find Me On:



Facebook
Youtube
Github

Discussion (2)

Collapse
kappys1 profile image
kappys1

Your demo

Collapse
theqwertypusher profile image
Jason Victor

Pretty neat. Would be helpful for readers if you can explain how these effects works particularly with 'inset'