I am trying to make same animated effect when hover on button. First of all I want when hover on button to expand background color black in horizontal of button I belive might I shoud use any transation property? Secondly When leave mouse hover on button background color strangulate like border-radius in the center of the button.
I have did until now to created a class btn and put same styles in tag head like code below. But when I leave mouse over on button background-color dont't strangulate in the center as I mentiod before.
<style>
body {
background: #2ecc71;
font-size: 62.5%;
}
.container {
padding: 2em;
}
/* GENERAL BUTTON STYLING */
button,
button::after {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
button {
background: none;
border: 3px solid #fff;
border-radius: 5px;
color: #fff;
display: block;
font-size: 1.6em;
font-weight: bold;
margin: 1em auto;
padding: 2em 6em;
position: relative;
text-transform: uppercase;
}
button::before,
button::after {
background: black;
content: '';
position: absolute;
z-index: -1;
}
button:hover {
color: #2ecc71;
}
.btn-3::after {
height: 0;
left: 50%;
top: 50%;
width: 0;
}
.btn-3:hover:after {
height: 100%;
left: 0;
top: 0;
width: 100%;
}
/* BUTTON 4 */
</style><body>
<div class="container">
<button class="btn-3">Button 3</button>
</div>
</body>This is exactly what I want to create for button hover by the design UI/UX:enter link description here When hover display background-color: horizontal, after leave mouse hover coming background color strangulate in the center on the button.
By the Figma, I am talking for this button:[![enter image description here][2]][2]