I have did until now created a button and give same property for button.
I have used linear-gradient as the background-image
position the image at the center of the element and then transition
background-size from 0% 100% to 100% 100% on hover.
But I didn't do another animation when leave mouse over on button background color coming from corners to center on button like border-radius in the center on button.
Below is my code:
button {
position: relative;
display: inline-block;
padding: 15px 70px;
border-radius: 5px;
color: black;
font-size: 30px;
font-family: arial;
background-color: #D5C264;
background-image: linear-gradient(#000000, #000000);
background-repeat: no-repeat;
transition: background-size .3s, color .3s;
}
.center-corner {
background-position: 50% 50%;
}
.center-corner {
background-size: 0% 0%;
}
button:hover {
background-size: 100% 100%;
color: #fff;
}<button class='center-corner'>NEXT</button>I want to create this effect exactly by UI/UX which I am sharing the link: (this is button I am talking when hover change background color)
[![enter image description here][1]][1]
Anyone help.
Use a div inside the button:
button {
cursor: pointer; /* now added in my edit */
display: inline-block;
padding: 15px 70px;
border-radius: 5px;
color: black;
font-size: 30px;
font-family: arial;
background-color: #D5C264;
transition: color .8s;
position: relative; /* now changed in my edit */
z-index: 1; /* because text to be placed over the background */
overflow: hidden; /* because background of div not to be overflow from button. */
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* top-left and transform are for putting div in the middle of button.*/
background-image: linear-gradient(#000000, #000000);
transition: .8s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: white;
}
button:hover .background {
width: 150%;
height: 500%; /* 150% and 500% because div completely to be fill the space of the button.*/
}<button class='center-corner'>
<div class="background"></div>NEXT
</button>