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 have provided you four types of hover effects source code that we can use easily in our projects.

HTML

<div class="btn-hover">
	<button type="button" class="button left-right">Left To Right</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>

CSS

.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;
} 

hr {
    border: 1px solid #ddd;
    margin: 30px 0px;
}