Placing a Button on the clipped border in html - html

Question

I want to place a button on a border of a div that is clipped through the clip-path property. i have been able to clip the border but can't seem to place the button on the curved border. i have tried everything but can't seem to figure it out. Any help would be appreciated. Thanks in advance. I have posted the code below. Please check it out! Thanks.
.learningSection {
width: 100%;
height: auto;
background: linear-gradient(90deg, #6a0bf5 -0.87%, #2461ed 100%);
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
padding: 65px;
}
.freeTrialBtn {
width: 217px;
height: 35px;
background: #11ee92;
box-shadow: 0px 2px 2px rgb(0 0 0 / 20%);
border-radius: 25px;
align-items: center;
border: 0;
}
#media only screen and (max-width: 490px)
.learningSection {
content: "";
position: relative;
clip-path: ellipse(400px 100% at top);
}
<div class="learningSection">
<div class="learningSectionTextandBtn">
<h1 class="learningHeading">Start Learning</h1>
<p class="learningText">
Learn 12 different languages in just ten minutes a day.
</p>
<form action="/enternumber" id="enternumber" method="POST">
<input type="hidden" name="pckg" id="daily" value="jazz-sku-1-day" />
<button class="freeTrialBtn" style="margin-top: 20px;">
<p style="text-align:center;margin: 0;">Start Free Trial!</p>
</button>
</form></div>
I want the result the image to be like this
but the result is this

Answer 1

I hope you know what you are doing with Clip-path but remember that clip-path , CLIPS all its container so every element will get removed so you can't use elements on its border because they will get clipped so you need to use another container to use elements on it. Here is the code with clip-path.
body {
margin: 0;
padding: 0;
}
.container {
background-color: green;
width: auto;
position: relative;
height: 450px;
}
.parent {
width: 100%;
height: 420px;
overflow: hidden;
position:relative;
margin:0 auto;
clip-path: ellipse(1000px 100% at top);
}
.backgroundContainer {
width: 100vw;
height: 500px;
background-color: blue;
position: absolute;
left: 0;
top: 0;
}
.content {
background-color:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align:center;
width: 50vw;
}
.btn {
position:absolute;
top: 93%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="parent">
<div class="backgroundContainer"></div>
<div class="content">
<p>Lorem</p>
<p>Lorem, ipsum dolor.</p>
</div>
</div>
<button class="btn">Click Me</button>
</div>
hope i explained it well

Answer 2

I did it without the clip-path so if you must use clip-path you can change some of it .
i used the border-radius and position absolute to make a backGround and then placed the button where i wanted it
body {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 420px;
overflow: hidden;
position:relative;
background-color:yellow;
}
.backgroundContainer {
width: 120vw;
height: 400px;
background-color: blue;
position: absolute;
left: -10%;
top: 0;
border-radius: 0% 0% 50% 50%;
}
.content {
background-color:red;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align:center;
width: 50vw;
}
.btn {
position:absolute;
top: 95%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="backgroundContainer">
</div>
<div class="content">
<p>Lorem</p>
<p>Lorem, ipsum dolor.</p>
</div>
<button class="btn">Click Me</button>
</div>