Simple Button Hover Effects CSS

Hey, developers today in this post I am going to share an HTML Button with Hover Effect. To implement this button in your project, you have to just copy the HTML and CSS code and save the HTML code with .html file extension and CSS code with .css file extension then run the .html file in your browser and see the output.

Preview

html css button hover effects, Simple Button Hover Effects CSS, geeks help, raju webdev

HTML Code

index.html

<!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> Button Hover Effect </title>
   <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="buttonContainer">
        <button class="btn"> Click Me </button>
    </div>
</body>

</html>


CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    position: relative;
}

.buttonContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn {
    position: relative;
    border: none;
    width: 130px;
    height: 50px;
    background-color: orangered;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.5s;
    padding: 10px;
}

.btn::after {
    content: '';
    position: absolute;
    left: 0%;
    top: 0%;
    width: 0%;
    transition: all 0.5s;
    z-index: -1;
    border-radius: 5px;

    border-top: 3px solid orangered;
}

.btn::before {
    content: '';
    position: absolute;
    right: 0%;
    bottom: 0%;
    width: 0%;
    transition: all 0.5s;
    border-radius: 5px;

    z-index: -1;
    border-top: 3px solid orangered;
}

.btn:hover {
    background-color: transparent;
    color: orangered;
}

.btn:hover::after,
.btn:hover::before {
    width: 100%;
}


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad