Button Hover Effect in HTML and CSS (CSS Animation)

Simple Button hover Effect using HTML and CSS

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href=”https://fonts.googleapis.com/css2?family=Poppins&display=swap” rel=”styleshee…


This content originally appeared on DEV Community and was authored by Beginner Developer

Simple Button hover Effect using HTML and CSS

HTML Code: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="main-content">
        <div class="button-main">
            <button class="button"> Hover me</button>
        </div>
    </div>
</body>
</html>

CSS 

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body{
    background-image: url('bg.jpg');
}
.main-content{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.button-main{
    position: relative;
}
.button{
    padding: 20px 70px;
    background-color: #e15f41;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}
.button:focus{
    outline: none;
}
.button:hover{
    background-color: #000;
}
.button:before, .button:after{
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
    border-style: solid;
    border-width: 0;
    content: "";
    height: 24px;
    position: absolute;
    width: 24px;
    border-color: #000;
}
.button:before{
    border-left-width: 2px;
    border-top-width: 2px;
    left: -5px;
    top: -6px;
}
.button:after{
    border-bottom-width: 2px;
    border-right-width: 2px;
    bottom: -5px;
    right: -6px;
}
.button:hover:before, .button:hover:after{
    height: 100%;
    width: 100%;
}

Output:
Button Hover Effect OutputPreview: https://button-hover-effects.vercel.app/
My Blog:- https://beginners-developer.blogspot.com/


This content originally appeared on DEV Community and was authored by Beginner Developer


Print Share Comment Cite Upload Translate Updates
APA

Beginner Developer | Sciencx (2021-08-29T15:35:57+00:00) Button Hover Effect in HTML and CSS (CSS Animation). Retrieved from https://www.scien.cx/2021/08/29/button-hover-effect-in-html-and-css-css-animation/

MLA
" » Button Hover Effect in HTML and CSS (CSS Animation)." Beginner Developer | Sciencx - Sunday August 29, 2021, https://www.scien.cx/2021/08/29/button-hover-effect-in-html-and-css-css-animation/
HARVARD
Beginner Developer | Sciencx Sunday August 29, 2021 » Button Hover Effect in HTML and CSS (CSS Animation)., viewed ,<https://www.scien.cx/2021/08/29/button-hover-effect-in-html-and-css-css-animation/>
VANCOUVER
Beginner Developer | Sciencx - » Button Hover Effect in HTML and CSS (CSS Animation). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/29/button-hover-effect-in-html-and-css-css-animation/
CHICAGO
" » Button Hover Effect in HTML and CSS (CSS Animation)." Beginner Developer | Sciencx - Accessed . https://www.scien.cx/2021/08/29/button-hover-effect-in-html-and-css-css-animation/
IEEE
" » Button Hover Effect in HTML and CSS (CSS Animation)." Beginner Developer | Sciencx [Online]. Available: https://www.scien.cx/2021/08/29/button-hover-effect-in-html-and-css-css-animation/. [Accessed: ]
rf:citation
» Button Hover Effect in HTML and CSS (CSS Animation) | Beginner Developer | Sciencx | https://www.scien.cx/2021/08/29/button-hover-effect-in-html-and-css-css-animation/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts