Fill button back-color from center towards corners and when leave a button to coming background-color from corners to center on button as circle
I have done until now to create a button and inside a tag button I have created another div with class background to give same property for animation effects when click on button. But I am not sure if in this way is regular syntax for HTML to put another div into tag button in my case? I AM SHARING MY CODE:
button {
height: 73px;
min-width: 198px;
border-radius: 5px;
background-color: $gold;
border-color: $gold;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 1.313rem;
color: black;
z-index: 2;
line-height: 30.24px;
font-weight: bold;
text-transform: uppercase;
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(#000000, #000000);
transition: .5s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: $gold;
}
button:hover .background {
width: 500%;
height: 500%;
} <button class='btn'>
<div class="background"></div>Contact
</button>But when I Click on button we want background color display as circle and not as eclipse in the center on button. Exactly by the Figmaenter link description here
or code pene: enter link description here
The issue in your approach is that you are setting the background width and height to 1:1 proportions. This would make circle for a square button. For you to create circle you need to make it proportional to the width and height of your button. For example:
button {
height: 73px;
min-width: 198px;
border-radius: 5px;
background-color: $gold;
border-color: $gold;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 1.313rem;
color: black;
z-index: 2;
line-height: 30.24px;
font-weight: bold;
text-transform: uppercase;
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(#000000, #000000);
transition: .5s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: $gold;
}
button:hover .background {
width: 150%;
height: 406%;
}
<button class='btn'>
<span class="background"></span>Contact
</button>To get the proportional width you can use in your case (198/73)*height. So if you choose for your height to be 130% you should have width of 353%. The higher % the faster your animation will be, so keep that in mind.