How can i make a button like this in html and css
>Solution :
Use a specific font (like google fonts) if you want to achieve the same ok font style. Feel free to comment if you have any questions.
.myBtn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 140px;
height: 40px;
cursor: pointer;
border-radius: 8px;
background: linear-gradient(90deg, rgba(24,123,205,1) 0%, rgba(15,81,135,1) 50%);
}
.myBtn p {
position: fixed;
color: #ffffff;
font-size: 3.2vw;
font-weight: bold;
}
.myBtn .topLayer {
width: 100%;
height: 50%;
border-top-left-radius: 4px;
border-top-right-radius: 3px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 13px;
background-color: #187bcd;
}
.myBtn .bottomLayer {
margin-left: 3%;
width: 97%;
height: 50%;
border-top-left-radius: 4px;
border-bottom-left-radius: 2px;
background-color: #0f5187;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}<div class="myBtn">
<div class="topLayer">
</div>
<p>OK</p>
<div class="bottomLayer">
</div>
</div>