fill div on hover
div {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 5px solid #B17461;
color: #B17461;
font-size: 30px;
font-family: arial;
background-image: linear-gradient(#B17461, #B17461);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size .5s, color .5s;
}
div:hover {
background-size: 100% 100%;
color: #fff;
}fill div on hover
div {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 5px solid #B17461;
color: #B17461;
font-size: 30px;
font-family: arial;
background-image: linear-gradient(#B17461, #B17461);
background-repeat: no-repeat;
transition: background-size .5s, color .5s;
}
.center-right-left, .center-top-bottom, .center-corner {
background-position: 50% 50%;
}
.to-left {
background-position: 100% 50%;
}
.to-right {
background-position: 0% 50%;
}
.to-top {
background-position: 50% 100%;
}
.to-bottom {
background-position: 50% 0%;
}
.center-right-left, .to-left, .to-right {
background-size: 0% 100%;
}
.center-top-bottom, .to-top, .to-bottom {
background-size: 100% 0%;
}
.center-corner {
background-size: 0% 0%;
}
div:hover {
background-size: 100% 100%;
color: #fff;
}fill div on hover
<h4>From center towards left and right</h4>
<div class='center-right-left'>NEXT</div>
<h4>From center towards top and bottom</h4>
<div class='center-top-bottom'>NEXT</div>
<h4>From center towards corners</h4>
<div class='center-corner'>NEXT</div>
<h4>From right to left</h4>
<div class='to-left'>NEXT</div>
<h4>From left to right</h4>
<div class='to-right'>NEXT</div>
<h4>From bottom to top</h4>
<div class='to-top'>NEXT</div>
<h4>From top to bottom</h4>
<div class='to-bottom'>NEXT</div>Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
