Кнопка с анимацией.Эллипс.
<button href="#" class="grow_ellipse">Кнопка</button>
<style>
button {
width: 202px;
height: 50px;
font-size: 24px;
background: #f0583a;
color: #ffffff;
border: 4px solid #f0583a;
border-radius: 40px;
padding: 0;
position: relative;
z-index: 1;
overflow: hidden;
}
button:hover {
color: #f0583a;
}
button::after {
content: "";
background: #ffffff;
position: absolute;
z-index: -1;
display: block;
}
button.grow_ellipse::after {
border-radius: 46%;
left: -50%;
right: -50%;
top: -150%;
bottom: -150%;
transform: scale(0, 0);
transition: all 0.3s ease;
}
button.grow_ellipse:hover::after {
transform: scale(1, 1);
transition: all 0.9s ease-out;
}
</style>