Button hover effect with HTML & CSS only

 

 Button hover effect with HTML & CSS only


Source Code


HTML-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">

    <link rel="stylesheet" href="style.css">

    

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <title>hover</title>

</head>

<body>

    

    <div class="container">

        <div class="btn btn1">Hover 1</div>

        <div class="btn btn2">Hover 2</div>

        <div class="btn btn3">Hover 3</div>

        <div class="btn btn4">Hover 4</div>

    </div>

</body>

</html>

 

 

 

CSS-CODE

body {
    padding: 0;
    margin: 0;
}


.container {
    text-align: center;
    margin-top: 360px;
    display: flex;
    justify-content: center;
}


.btn {
    margin: 10px;
    border: 1px solid #1abc9c;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn1, .btn2 {
    color: #1abc9c;
    transition: .4s;
}

.btn3, .btn4 {
    color: #fff;
    transition: .4s;
}

.btn1:hover, .btn2:hover {
    color: #fff;
    transition: .4s;
}

.btn3:hover, .btn4:hover {
    color: #1abc9c;
}


.btn::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    background-color: #1abc9c;
    z-index: -1;
    transition: .7s;
}


.btn1::before, .btn3::before {
    top: 0;
    border-radius: 0 0 50% 50%;
}

.btn2::before, .btn4::before {
    bottom: 0;
    border-radius: 50% 50% 0 0;
}


.btn3::before, .btn4::before {
    height: 180%;
}

.btn1:hover::before, .btn2:hover::before {
    height: 180%;
}

.btn3:hover::before, .btn4:hover::before {
    height: 0;
}