Ad Code

Button Hover Using HTML and CSS | Web Designing.

Ashish Kumar December 22, 2022

 Welcome to Codingfizz,

In this article, We will design some animated buttons using HTML and CSS animation. There will be four hovered buttons. First, we need to create two files one is an index file with a .html extension and another is a style with a .css extension.

You should have knowledge of CSS animation transformation and transition. That are all advanced CSS concepts. By the way, the code is very simple to understand.

Button Hover Using HTML and CSS 

Html Code

The first file is an HTML file that name is 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="container">
        <a href="#" class="btn btn1">Hover Me <span>&#10230;</span>
        </a>
        <a href="#" class="btn btn2">Hover Me</a>
        <a href="#" class="btn btn3">Hover Me</a>
        <a href="#" class="btn btn4">Hover Me</a>
    </div>
</body>
</html>

CSS Code

The second file is a CSS file that name is style.css.
*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body{
    background: #f1f5ff;
}

.container{
    width: fit-content;
    margin: 150px auto;
}
.btn{
    width: 200px;
    height: 60px;
    color: #fff;
    background: black;
    font-size: 18px;
    text-decoration: none;
    margin: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    position: relative;
}

.btn1 span{
    margin-left: 10px;
    width: 0;
    overflow: hidden;
    transition: 0.5s;
}
.btn1:hover span{
    width: 30px;
}

.btn2{
    box-shadow: 0px 0px 0 blue;
}
.btn2:hover{
    box-shadow: 8px 10px 0 blue;
}

.btn3:hover{
    background: transparent;
    border: 2px solid black;
    color: black;
    padding-top: 5px;
}
.btn3::after{
    content: '';
    width: 100%;
    height: 100%;
    border: 2px solid black;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transition: top 0.5s, left 0.5s;
}
.btn3:hover::after{
    top: 5px;
    left: 5px;
    box-sizing: content-box;
}
.btn4:hover{
    background: transparent;
    color: #000;
}
.btn4::before, .btn4::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    transition: top 0.5s, left 0.5s;
    z-index: -1;
}
.btn4::before{
    border-left: 2px solid #000;
    border-top: 2px solid #000;
}
.btn4::after{
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}
.btn4:hover::before{
    top:-5px;
    left: -15px;
}
.btn4:hover::after{
    top: 5px;
    left: 15px;
}
You get a clear understanding of everything in this article. If you want to ask anything. Please feel free to contact us by commenting down below. Thank you

Post a Comment

0 Comments

Ad Code