CSS Button Hover Effects Animation

CSS button hover effects are more beautiful and attractive animation effects These hover effects we can also apply to any image and icon and here we h

 


CSS button hover effects are more beautiful and attractive animation effects These hover effects we can also apply to any image and icon and here we have provided you four types of hover effects source code that we can use easily in our projects.


CSS:


<style>
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
font-family: arial;
}
hr {
    border: 1px solid #ddd;
    margin: 30px 0px;
}

.btn-hover {
    box-shadow: 0px 0px 10px 0px #b5b5b5;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 90%;
    margin: 50px auto 0px;
    padding: 50px 0px;
    border-radius: 10px;
}
.btn-hover .button {
    background: none;
    padding: 10px 20px;
    font-size: 19px;
    margin: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0px 1px 10px 0px rgb(206, 205, 201);
    border-radius: 25px;
    border: 1px solid #e6e6e6;
    color: #333333;
    transition: 0.5s;
    min-width: 30%;
    outline: none;
    cursor: pointer;
}
.btn-hover .button:hover {
    color: #fff;
}


/*-- Hover Effect from left to right --*/
.left-right::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #F44336;
    z-index: -1;
    transition: 0.5s;
}
.left-right:hover::before{
width: 100%;
}

/*-- Hover Effect from right to left --*/
.right-left::before{
    content: "";
    position: absolute;
    width: 15px;
    height: 100%;
    top: 0px;
    right: 0px;
    background: #9C27B0;
    z-index: -1;
    transition: 0.5s;
}
.right-left:hover::before{
    width: 100%;
}

/*-- Hover Effect from top to Bottom --*/
.top-bottom::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 7px;
    top: 0px;
    left: 0px;
    background: #673ab7;
    z-index: -1;
    transition: 0.5s;
}
.top-bottom:hover::before{
    height: 100%;
}

/*-- Hover Effect from bottom to top --*/
.bottom-top::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 7px;
    top: 36px;
    left: 0px;
    bottom: 0px;
    background: #03a9f4;
    z-index: -1;
    transition: 0.5s;
}  
.bottom-top:hover::before{
    height: 100%;
    top: 0px;
} 
</style>

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create CSS Button Hover Effects Animation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="btn-hover">
<button type="button" class="button left-right">URL</button>
<button type="button" class="button right-left">Right To Left</button>
<hr>
<button type="button" class="button top-bottom">Top To Bottom</button>
<button type="button" class="button bottom-top">Bottom To Top</button>
</div>
</body>
</html>

Κατηγορίες:
Σχόλια