I want to code in CSS or HTML so I can obtain the result that looks like the below picture: I believe it’s with border-radius property but I cannot get it similar
Can someone advise me please?
I want to code in CSS or HTML so I can obtain the result that looks like the below picture: I believe it’s with border-radius property but I cannot get it similar
Can someone advise me please?
I imagine that you’re seeing too much rounding in the borders. border-radius
can take fractions as parameters. For example:
border-radius: 30px/40px;
This sets the horizontal radius/vertical radius (think of it as setting the two axes of an ellipse). This helps you keep the horizontal or vertical edge straighter while curving the other. Here’s my attempt (you’ll need to tweak the padding):
<style>
#comprar-btn {
border-radius: 40px/35px; /* The important line */
font-family: sans-serif;
color: #ddd;
border: 1px solid #ddd;
padding: 9px 15px;
font-weight: bold;
font-size: 2em;
background-color: rgba(0,0,0,0);
}
body {
background: rgb(248,75,33);
}
</style>
<button id="comprar-btn">
COMPRAR ONLINE
</button>
Thanks guys. I understand now.
no problem, have a great day and happy coding